Beispiel für die Kapselung eines Karusselldiagramm-Plug-ins in Javascript

Das Beispiel in diesem Artikel teilt den Plug-in-Kapselungscode des js-Karusselldiagramms als Referenz. Der spezifische Inhalt lautet wie folgt:

Codewelt Als Anfänger muss ich während meiner Arbeit das Karussellbild der Links- und Rechtskonvertierung viele Male aufrufen, deshalb habe ich es gekapselt. Aber ich habe immer das Gefühl, dass der Code, den ich schreibe, umständlicher ist. Die Methode ist ziemlich umständlich. Bitten Sie den Meister, sie zu vereinfachen und nebenbei zu lernen. Darüber hinaus, wenn der Standardwert top ist. Es gibt keinen Animationseffekt.

~function(){
  function AutoBanner(curEleId,ajaxURL,interval){
    //把之前存储获取元素的变量都作为当前实例的私有属性
    this.banner = document.getElementById(curEleId);
    this.bannerInner = utils.firstChild(this.banner);
    this.bannerTip = utils.children(this.banner,"ul")[0];
    this.bannerLink = utils.children(this.banner,'a');
    this.bannerLeft = this.bannerLink[0];
    this.bannerRight = this.bannerLink[1];
    this.pList = this.bannerInner.getElementsByTagName('p');
    this.imgList = this.bannerInner.getElementsByTagName('img');
    this.oLis = this.bannerTip.getElementsByTagName('li');

    //之前的全局变量也应该变为自己的私有属性
    this.jsonData = null;
    this.interval = interval || 3000;
    this.autoTimer = null;
    this.step = 0;
    this.ajaxURL = ajaxURL;
    //返回当前实例
    return this.init();
  }

  AutoBanner.prototype = {
    constructor:AutoBanner,
    //Ajax请求数据
    getData:function(){
      var _this = this;
      var xhr = new XMLHttpRequest;
      xhr.open("get",this.ajaxURL + "?_="+Math.random(),false);
      xhr.onreadystatechange = function(){
        if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
          _this.jsonData = utils.formatJSON(xhr.responseText)
        }
      }
      xhr.send(null)
    },
    //实现数据绑定
    bindData:function(){
      var str = "",str2 = "";
      if(this.jsonData){
        for(var i = 0,len=this.jsonData.length;i<len;i++){
          var curData = this.jsonData[i];
          str+=&#39;<p><img src="" alt="" trueImg="&#39;+curData[&#39;img&#39;]+&#39;"></p>&#39;;
          i===0?str2+="<li class=&#39;bg&#39;></li>":str2+="<li></li>"
        }
      }
      this.bannerInner.innerHTMl = str;
      this.bannerTip.innerHTML = str2;
    },
    //延迟加载
    lazyImg:function(){
      var _this = this;
      for(var i = 0,len = this.imgList.length;i<len;i++){
        ~function(i){
          var curImg = _this.imgList[i];
          var oImg = new Image;
          oImg.src = curImg.getAttribute(&#39;trueImg&#39;);
          oImg.onload = function(){
            curImg.src = this.src;
            curImg.style.display = block;
            //只对第一张处理
            if(i===0){
              var curp = curImg.parentNode;
              curp.style.zIndex = 1;
              myAnimate(curp,{opacity:1},200);
            }
            oImg = null;
          }
        }(i)
      }
    },
    //自动轮播
    autoMove:function(){
      if(this.step === this.jsonData.length-1){
        this.step = -1
      }
      this.step++;
      this.setBanner();
    },
    //切换效果和焦点对齐
    setBanner:function(){
      for(var i = 0,len = this.pList.length;i<len;i++){
        var curp = this.pList[i];
        if(i===this.step){
          utils.css(curp,"zIndex",1)
          //2、让当前的透明度从0变为1,当动画结束，我们需要让其他的p的透明度的值直接变为0
          myAnimate(curp,{opacity:1},200,function(){
            var curpSib = utils.siblings(this);
            for(var k = 0,len = curpSib.length;k<len;k++){
              utils.css(curpSib[k],&#39;opacity&#39;,0)
            }

          })
          continue
        }
        utils.css(curp,"zIndex",0)
      }
      //实现焦点对其
      for(i = 0,len = this.oLis.length;i<len;i++){
        var curLi = this.oLis[i];
        i === this.step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
      }
    },
    //控制自动轮播
    mouseEvent:function(){
      var _this = this;
      this.banner.onmouseover = function(){
        window.clearInterval(_this.autoTimer);
        _this.bannerLeft.style.display = _this.bannerRight.style.display = "block"

      }
      this.banner.onmouseout = function(){
        _this.autoTimer = window.setInterval(function(){
          _this.autoMove.call(_this)
        },_this.interval);
        _this.bannerLeft.style.display = _this.bannerRight.style.display = "none"
      }
    },
    //实现焦点切换
    tipEvent:function(){
      var _this = this;
      for(var i = 0,len = this.oLis.length;i<len;i++){
        var curLi = this.oLis[i];
        curLi.index = i;
        curLi.onclick = function(){
          _this.step = this.index;
          _this.setBanner();
        }
      }
    },
    //实现左右切换
    leftRight:function(){
      var _this = this;
      this.bannerRight.onclick = function(){
        _this.autoMove();
      };
      this.bannerLeft.onclick = function(){
        if(_this.step === 0){
          _this.step = _this.jsonData.length;
        }
        _this.step--;
        _this.setBanner();
      }
    },
    //当前插件的唯一入口 命令模式:init相当于指挥室，指挥各军队协同作战
    init:function(){
      var _this = this;
      this.getData();
      this.bindData();
      window.setTimeout(function(){
        _this.lazyImg();
      },500);
      this.autoTimer = window.setInterval(function(){
        _this.autoMove();
      },this.interval);

      this.mouseEvent();
      this.tipEvent();
      this.leftRight();
      return this;
    }

  }

  window.AutoBanner = AutoBanner
}()

//使用
var banner1 = new AutoBanner(&#39;banner&#39;,&#39;json/banner.txt&#39;,1000)

Das obige ist der detaillierte Inhalt vonBeispiel für die Kapselung eines Karusselldiagramm-Plug-ins in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!