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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP基础知识介绍
2013/09/17 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
javascript this用法小结
2008/12/19 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
angular2使用简单介绍
2016/03/01 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
社保缴纳证明申请书
2014/11/03 职场文书
个人党性分析总结
2015/03/05 职场文书
党小组意见范文
2015/06/08 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL