~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></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)
精彩专题分享：