Exemple d'encapsulation du plug-in de graphique carrousel en javascript

L'exemple de cet article partage le code d'encapsulation du plug-in du graphique carrousel js pour votre référence. Le contenu spécifique est le suivant

Le code spécifique est le suivant :

~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)

Code World En tant que novice, j'ai besoin d'appeler l'image du carrousel de conversion gauche et droite plusieurs fois au cours de mon travail, je l'ai donc encapsulée. Mais j'ai toujours l'impression que le code que j'écris est plus lourd. La méthode est plutôt maladroite, merci de demander au maître de la simplifier et d'apprendre au passage. De plus, si la valeur par défaut est top. Il n'y aura aucun effet d'animation.

$.fn.zuoyouzhuan = function(options) {
        this.each(function(i, ele) {
            slide(ele, options)
        })
        return this
    }
    var slide = function(ele, options) {
        var des = $.extend({
            fangxiang: 'left',
            duoshaotu: '4',
            sudu: '3000'
        }, options)
        var $ele = $(ele)
        var $ul = $ele.find('ul')
        var $li = $ele.find('li')
        var x_width = $ele.find('li').width()
        var y_height = $ele.find('li').height()
        var num = $ele.find('li').length;
        if(des.fangxiang == "top") {
            var topmar = parseInt($li.css('margin-bottom'))
            var  boderw= parseInt($('li').css('border-width'))
            $ul.css({ 'heigth': (num * (y_height + topmar + boderw*2)) + 'px' });
        }
        if(des.fangxiang == "left") {
            var  boderw= parseInt($('li').css('border-width'))
            var rightmar = parseInt($li.css('margin-right'))
            $ul.css({ 'width': (num * (x_width + rightmar+boderw*2)) + 'px' });
        }
        var t;
        if(num > des.duoshaotu) {
            var t = setInterval(sidebarFlipAuto, des.sudu);
            function sidebarFlipAuto() {
                if(des.fangxiang == "left") {
                    $ul.stop(true, true).animate({ "left": (x_width + rightmar) + 'px' }, 300, function() {
                        $ul.find('li:first').appendTo($ul);
                        $ul.css("left", '0');
                    });
                }
                if(des.fangxiang == "top") {
                    $ul.stop(true, true).animate({ "top": (y_height + topmar) + 'px' }, 300, function() {
                        $ul.find('li:first').appendTo($ul);
                        $ul.css("top", '0');
                    });
                }
            }
            $ul.hover(function() {
                clearInterval(t);
            }, function() {
                t = setInterval(sidebarFlipAuto, 4000);
            })
            $ele.find('span').eq(0).unbind('click').click(function() {
                $ul.find('li:last').prependTo($ul);
                if(des.fangxiang == "left") {
                    $ul.css({ "left": (x_width + rightmar) + 'px' });
                    $ul.stop(true, true).animate({ "left": '0' }, 300);
                }
                if(des.fangxiang == "top") {
                    $ul.css({ "top": (y_height + rightmar) + 'px' });
                    $ul.stop(true, true).animate({ "top": '0' }, 300);
                }
            })
            $ele.find('span').eq(1).unbind('click').click(function() {
                sidebarFlipAuto();
            })
        }

    }
    
    那个.unbind('click').click不写这个有时会执行两次，所以百度了一下这个方法。
    求简洁化。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!