jquery制作多功能轮播图插件

;(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);