jquery制作多功能轮播图插件


Posted in Javascript onApril 02, 2015

这是一款多功能幻灯片插件,支持多种配置,css样式是扒的网上的,里面的代码原创,轻喷~

;(function($) {
  "use strict";
  var methods = {
    o : {
      next: "#cycle-next",
      prev: "#cycle-prev",
      pager : "#cycle-nav",
      slider : "#beauty-slider",
      timeLine : "#timeLine",
      innerTimeLine : "#inner-timeLine",
      timeLineNode : "#timeLine-node",
      sliderItemClass : "sliderItem",
      nodeActive : "node_active",
      displays : {fade : "fade",left : "left",right : "right",top : "top",bottom : "bottom"},
      navHtml : "<a href='javascript:;' class='&'>?</a>",
      navConfig : {navBoxClass : "cycle-nav", navActiveClass: "activeSlide" ,showNum : true}
    },
    generateId : function(){
      return "-" + new Date().getTime();
    },
    generateTemplate : function(id,settings){
      var htmls = new Array();
      htmls.push('<div class="slider-wrap">');
      htmls.push('<div class="cycleslider-wrap">');
      htmls.push('<div id="beauty-slider' + id + '" class="cycleslider"></div>');
      if(settings.isArrow) {
        htmls.push('<a id="cycle-prev' + id + '" class="cycle-prev" href="javascript:;" title="试试左方向键翻页">Prev</a>');
        htmls.push('<a id="cycle-next' + id + '" class="cycle-next" href="javascript:;" title="试试右方向键翻页">Next</a>');
      }
      if(settings.showTimeLine) {
        htmls.push('<div class="timeLine" id="timeLine' + id + '">');
        htmls.push('<div class="innerTimeLine" id="inner-timeLine' + id + '" style="width:0px;"> </div>');
        htmls.push('<div id="timeLine-node' + id + '"></div>');
        htmls.push('</div>');
      }
      if(settings.isNav) {
        htmls.push('<div id="cycle-nav' + id + '" class="cycle-nav"></div>');
      }
      htmls.push('</div>');
      htmls.push('<div class="loader"></div>');
      htmls.push('</div>');
      return htmls;
    },
    init : function(dom, options) {
      var s = this;
      var defaults = { url : "", data : {} , auto : false ,time : 2000, overLay : false, isArrow : true, isNav : true ,showTimeLine : false,showTip : false, keyboard : true, display : s.o.displays.fade,navConfig : s.o.navConfig};
      var settings = $.extend({},defaults, options);
      var id = s.generateId();
      $(".slider-wrap .loader").show();
      var imgArray = s.returnImgArray(dom, settings);
      if (imgArray != null && imgArray.length > 0) {
        s["imgcnt" + id] = imgArray.length;
        $(dom).html(s.generateTemplate(id,settings).join('')).show();
        var slider = $(s.o.slider + id);
        var pager = $(s.o.pager + id);
        var timeLineNode = $(s.o.timeLineNode + id);
        s.o.innerW = $(dom).width() - 20;
        var imgHtml = "";
        var pageHtml = "";
        var timeHtml = "";
        $.each(imgArray,function(index,item){
          var picClass = index == 0 ? s.o.sliderItemClass : s.o.sliderItemClass + " none";
          var navClass = index == 0 ? settings.navConfig.navActiveClass : "";
          imgHtml +='<div class="' + picClass + '"><a href="'+ ( s.isParamValid(item.picUrl) ? item.picUrl : "javascript:;" ) +'"><img src="' + item.picPath + '" width="'+item.width+'" height="' +item.height+ '" title="' + item.title + '"/></a></div>';
          pageHtml += s.o.navHtml.replace("?", settings.navConfig.showNum ? index + 1 : "").replace("&", navClass);
          var left = s.o.innerW * index / s["imgcnt" + id] - 13;
          var nodeClass = index == 0 ? s.o.nodeActive : "";
          timeHtml +='<div class="node ' + nodeClass + '" style="left: ' + left + 'px;">';
          if(settings.showTip) {
            timeHtml +='<div class="tooltip">' + item.title + '</div>';
          }
          timeHtml +='</div>';
        });
        slider.html(imgHtml);
        if(settings.isNav) {
          if(settings.navConfig.navBoxClass) {
            pager.removeClass(s.o.navConfig.navBoxClass).addClass(settings.navConfig.navBoxClass);
          }
          pager.html(pageHtml);
        }
        if(settings.showTimeLine) {
          timeLineNode.html(timeHtml);
        }
        slider.width(s.o.innerW);
        slider.find("." + s.o.sliderItemClass).width(s.o.innerW);
        $(s.o.timeLine + id).width(s.o.innerW);
        if(settings.overLay) {
          if($.fn.layerModel) {
            $(dom).layerModel({staySame : true, blurClose : true});
          } else {
            alert("请先引入layerModel插件!");
          }
        }
        s.initBind(id, settings);
        s["currentIndex" + id] = 0;
        var totalTime = settings.time / 1000 * s["imgcnt" + id];
        if(settings.auto) {
          if(settings.showTimeLine) {
            s.startTimeLine(id , totalTime,settings);
          } else {
            s.o.timeInterval = window.setInterval(function(){
              $("#cycle-next" + id).click();
            }, settings.time);
          }
        }
      } else {
        return;
      }
      return dom;
    },
    startTimeLine : function(id ,time, settings) {
      var s = this;
      var $innerTimeLine = $(s.o.innerTimeLine + id);
      var crnW = $innerTimeLine.width();
      for (var i = 0; i < s["imgcnt" + id]; i++) {
        var autoW = Math.floor(s.o.innerW * i / s["imgcnt" + id]);
        if(crnW == autoW) {
          s["currentIndex" + id] = i;
          s.updateImgLink(id, settings);
          $(s.o.timeLineNode + id).find("div.node").eq(i).addClass(s.o.nodeActive).siblings().removeClass(s.o.nodeActive);
        }
      }
      if(crnW < s.o.innerW) {
        $innerTimeLine.animate({width : "+=1px"}, time , 'linear', function(){
          s.startTimeLine(id, time, settings);
        });
      } else {
        $innerTimeLine.width(0);
        s.startTimeLine(id, time, settings);
      }
    },
    initBind :function(id, settings) {
      var s = this;
      var isEasing = $.easing.def;
      if(settings.isArrow) {
        $("#cycle-prev" + id + ", #cycle-next" + id).css({opacity: "0"});
        $(".cycleslider-wrap").hover(function(){
          $("#cycle-prev" + id).stop().animate({left: "-31", opacity: "1"},200,isEasing ? "easeOutCubic" : "");
          $("#cycle-next" + id).stop().animate({right: "-31", opacity: "1"},200,isEasing ?"easeOutCubic" : "");  
        }, function() {
          $("#cycle-prev" + id).stop().animate({left: "-50", opacity: "0"},400,isEasing ?"easeInCubic" : "");
          $("#cycle-next" + id).stop().animate({right: "-50", opacity: "0"},400,isEasing ?"easeInCubic" : "");    
        });
        $("#cycle-prev" + id).bind("click",function(){
          s["currentIndex" + id] = s["currentIndex" + id] <= 0 ? s["imgcnt" + id] - 1 : s["currentIndex" + id] - 1;
          s.updateImgLink(id,settings);
        });
        $("#cycle-next" + id).bind("click",function(){
          s["currentIndex" + id] = s["currentIndex" + id] < s["imgcnt" + id] - 1 ? s["currentIndex" + id] + 1 : 0;
          s.updateImgLink(id,settings);
        });
      }
      $(".slider-wrap .loader").hide();
      $("a",s.o.pager + id).bind("click",function(){
        if ($(this).hasClass(s.o.navConfig.navActiveClass)){
          return false;
        }
        s["currentIndex" + id] = $(this).index();
        s.updateImgLink(id,settings);
      });
       
      if(settings.auto && settings.showTimeLine) {
        $("div.node",s.o.timeLineNode + id).bind({
          click : function(){
            if($(this).hasClass(s.o.nodeActive)){
              return false;
            }
            s["currentIndex" + id] = $(this).index();
            s.updateImgLink(id,settings);
          },
          mouseover : function(){
            if(settings.showTip) {
              $(this).find(".tooltip").fadeIn();
            }
          },
          mouseout : function(){
            if(settings.showTip) {
              $(this).find(".tooltip").fadeOut();
            }
          }
        });
      }
      // 键盘操作
      if(settings.keyboard){
        $(window).keydown(function(event){
          //<---
          if(event.keyCode == 37){
            $("#cycle-prev" + id).click();
          }
          //--->
          if(event.keyCode == 39){
            $("#cycle-next" + id).click();
          }
        });
      }
    },
    updateImgLink : function(id, settings){
      var s = this;
      var index = s["currentIndex" + id];
      var display = settings.display;
      var isEasing = $.easing.def;
      var $items = $("div." + s.o.sliderItemClass,s.o.slider + id);
      switch (display) {
        case s.o.displays.fade :
          $items.eq(index).show().siblings().hide();
          break;
        case s.o.displays.left :
          $items.css({ position : "absolute", top : 0, left : s.o.innerW }).hide();
          $items.eq(index).animate({ left : 0 }, 100, isEasing ? "easeOutCubic" : "").show();
          $(s.o.slider + id).height(s.getImgMaxHeight(id));
          break;
        case s.o.displays.right :
          $items.css({ position : "absolute", top : 0, right : s.o.innerW }).hide();
          $items.eq(index).animate({ right : 0 }, 100, isEasing ? "easeOutCubic" : "").show();
          $(s.o.slider + id).height(s.getImgMaxHeight(id));
          break;
        case s.o.displays.top :
          break;
        case s.o.displays.bottom : 
          break;
        default :
          break;
      }
      $("a",s.o.pager + id).eq(index).addClass(settings.navConfig.navActiveClass).siblings().removeClass(settings.navConfig.navActiveClass);
      // 更新进度条的信息
      if(settings.auto && settings.showTimeLine) {
        var indexWidth = Math.floor(s.o.innerW * index / s["imgcnt" + id]);
        $(s.o.innerTimeLine + id).animate({width : indexWidth +"px"}, 500 , 'linear', function(){
          $(s.o.timeLineNode + id).find("div.node").eq(index).addClass(s.o.nodeActive).siblings().removeClass(s.o.nodeActive);
        });
      }
    },
    getImgMaxHeight : function(id) {
      var s = this;
      var slider = $(s.o.slider + id);
      var maxHeight = 0;
      $.each(slider.find("img"),function(index,item){
        var imgHeight = this.height;
        maxHeight = Math.max(maxHeight,imgHeight);
      });
      return maxHeight;
    },
    returnImgArray : function(dom,settings){
      var s = this;
      var imgArray = new Array();
      var url = settings.url;
      if (s.isParamValid(url)) {
        $.ajax({
          url : url + "?t=" + new Date().getTime(),
          type : 'POST',
          async : false,
          data : settings.data,
          dataType : 'json',
          success : function(data) {
            if (s.isParamValid(data)) {
              $.each(data, function(index, item) {
                imgArray.push(item);
              });
            }
          },
          error : function() {
            alert("图片数据源地址无效...");
            return null;
          },
          complete : function(XHR, TS) { XHR = null; }
        });
      } else {
        var imgs = $(dom).find("img");
        if (imgs != null && imgs.length > 0) {
          $.each(imgs,function(i,o){
            var pic = new Object();
            pic.picUrl = $(o).parent("a").attr("href");
            pic.picPath = $(o).attr("src");
            pic.width = $(o).attr("width");
            pic.height = $(o).attr("height");
            pic.title = $(o).attr("title");
            imgArray.push(pic);
          });
        }
      }
      return imgArray;
    },
    isParamValid : function(v) {
      return !(v == "" || v == null || v == undefined);
    }
  };
  $.fn.beautyFocus = function(options) {
    return this.each(function(index,item) {
      methods.init(item, options);  
    });
  };
})(jQuery);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
Javascript中3个需要注意的运算符
Apr 02 #Javascript
原生JS实现响应式瀑布流布局
Apr 02 #Javascript
Javascript变量的作用域和作用域链详解
Apr 02 #Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
JavaScript中操作Mysql数据库实例
Apr 02 #Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 #Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 #Javascript
You might like
php牛逼的面试题分享
2013/01/18 PHP
探讨php中header的用法详解
2013/06/07 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python生成随机密码
2015/03/10 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python中使用np.delete()的实例方法
2021/02/01 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
经济管理专业求职信
2014/06/09 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
辩护词范文大全
2015/05/21 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang