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 链式延迟执行DOME
Jan 04 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
利用node.js开发cli的完整步骤
Dec 29 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
php实现文件预览功能
2017/05/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
迟到检讨书1000字
2014/01/15 职场文书
意向书范本
2014/07/29 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android