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
';
          i===0?str2+="
":str2+="
"
        }
      }
      this.bannerInner.innerHTMl = str;
      this.bannerTip.innerHTML = str2;
    },
    //延迟加载
    lazyImg:function(){
      var _this = this;
      for(var i = 0,len = this.imgList.length;i
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!