Example of encapsulation of carousel chart plug-in in javascript

The example of this article shares the plug-in encapsulation code of the js carousel chart for your reference. The specific content is as follows

The specific code is as follows:

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

Little in the code world Bai, I need to call the carousel image of left and right conversion many times during my work, so I encapsulated it. But I always feel that the code I write is more cumbersome. The method is rather clumsy, please ask the master to simplify it and learn by the way. In addition, if the default value is top. There will be no animation effect.

$.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不写这个有时会执行两次，所以百度了一下这个方法。
    求简洁化。

The above is the detailed content of Example of encapsulation of carousel chart plug-in in javascript. For more information, please follow other related articles on the PHP Chinese website!