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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
vue-router的两种模式的区别
May 30 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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在字符串中查找另一个字符串
2008/11/19 PHP
php执行sql语句的写法
2009/03/10 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
浅析node.js的模块加载机制
2018/05/25 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Django后台获取前端post上传的文件方法
2018/05/28 Python
python3爬取torrent种子链接实例
2020/01/16 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python爬虫如何解决图片验证码
2021/02/14 Python
上海天奕面试题笔试题
2015/04/19 面试题
城市规划毕业生求职信
2013/10/10 职场文书
应届生英语教师求职信
2013/11/05 职场文书
质检的岗位职责
2013/11/17 职场文书
自我推荐书
2013/12/04 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
市场部岗位职责范本
2015/04/15 职场文书
九年级历史教学反思
2016/02/19 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python