快捷導(dǎo)航

js輪播圖的插件化封裝詳解

更新時間：2017年07月17日 14:39:19 作者：diasa

這篇文章主要為大家詳細(xì)介紹了js輪播圖的插件化封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js輪播圖的插件化封裝代碼，供大家參考，具體內(nèi)容如下

具體代碼如下:

~function(){
 function AutoBanner(curEleId,ajaxURL,interval){
  //把之前存儲獲取元素的變量都作為當(dāng)前實例的私有屬性
  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');

  //之前的全局變量也應(yīng)該變?yōu)樽约旱乃接袑傩?
  this.jsonData = null;
  this.interval = interval || 3000;
  this.autoTimer = null;
  this.step = 0;
  this.ajaxURL = ajaxURL;
  //返回當(dāng)前實例
  return this.init();
 }

 AutoBanner.prototype = {
  constructor:AutoBanner,
  //Ajax請求數(shù)據(jù)
  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)
  },
  //實現(xiàn)數(shù)據(jù)綁定
  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;
      //只對第一張?zhí)幚?
      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、讓當(dāng)前的透明度從0變?yōu)?,當(dāng)動畫結(jié)束，我們需要讓其他的div的透明度的值直接變?yōu)?
     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)
   }
   //實現(xiàn)焦點對其
   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"
   }
  },
  //實現(xiàn)焦點切換
  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();
    }
   }
  },
  //實現(xiàn)左右切換
  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();
   }
  },
  //當(dāng)前插件的唯一入口 命令模式:init相當(dāng)于指揮室，指揮各軍隊協(xié)同作戰(zhàn)
  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)

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: