js轮播图的插件化封装详解

本文实例为大家分享了js轮播图的插件化封装代码，供大家参考，具体内容如下

具体代码如下:

~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.divlist = this.bannerinner.getelementsbytagname('div');
    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+='<div><img src="" alt="" trueimg="'+curdata['img']+'"></div>';
          i===0?str2+="<li class='bg'></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('trueimg');
          oimg.onload = function(){
            curimg.src = this.src;
            curimg.style.display = block;
            //只对第一张处理
            if(i===0){
              var curdiv = curimg.parentnode;
              curdiv.style.zindex = 1;
              myanimate(curdiv,{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.divlist.length;i<len;i++){
        var curdiv = this.divlist[i];
        if(i===this.step){
          utils.css(curdiv,"zindex",1)
          //2、让当前的透明度从0变为1,当动画结束，我们需要让其他的div的透明度的值直接变为0
          myanimate(curdiv,{opacity:1},200,function(){
            var curdivsib = utils.siblings(this);
            for(var k = 0,len = curdivsib.length;k<len;k++){
              utils.css(curdivsib[k],'opacity',0)
            }

          })
          continue
        }
        utils.css(curdiv,"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('banner','json/banner.txt',1000)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。