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='&'>",
      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;">&nbsp;</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 " none";
          var navClass = index == 0 "";
          imgHtml +='<div class="' + picClass + '"><a href="'+ ( s.isParamValid(item.picUrl) "javascript:;" ) +'"><img src="/UploadFiles/2021-04-02/' + item.picPath + '">

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