欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-03 14:04:52
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function autobanner...

本文实例为大家分享了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)

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