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

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

具体代码如下:

获取元素的变量都作为当前实例的私有属性 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');

//之前的<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>也应该变为自己的私有<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>
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+='

';
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<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,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,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");
  }
},//控制<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>轮播
mouseEvent:function(){
  var _this = this;
  this.banner.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver = function(){
    window.clearInterval(_this.autoTimer);
    _this.bannerLeft.style.display = _this.bannerRight.style.display = "block"

  }
  this.banner.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut = 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();
  }
},//当前<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>的唯一入口 命令模式: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)

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

原文链接：https://www.f2er.com/js/37805.html

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

猜你在找的JavaScript相关文章