~function(){  function AutoBanner(curEleId,ajaxURL,interval){    //把之前存儲(chǔ)獲取元素的變量都作為當(dāng)前實(shí)例的私有屬性    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)前實(shí)例    return this.init();  }  AutoBanner.prototype = {    constructor:AutoBanner,    //Ajax請(qǐng)求數(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)    },    //實(shí)現(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;            //只對(duì)第一張?zhí)幚?           if(i===0){              var curDiv = curImg.parentNode;              curDiv.style.zIndex = 1;              myAnimate(curDiv,{opacity:1},200);            }            oImg = null;          }        }(i)      }    },    //自動(dòng)輪播    autoMove:function(){      if(this.step === this.jsonData.length-1){        this.step = -1      }      this.step++;      this.setBanner();    },    //切換效果和焦點(diǎn)對(duì)齊    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)動(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)      }      //實(shí)現(xiàn)焦點(diǎn)對(duì)其      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");      }    },    //控制自動(dòng)輪播    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"      }    },    //實(shí)現(xiàn)焦點(diǎ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();        }      }    },    //實(shí)現(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)于指揮室，指揮各軍隊(duì)協(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)