menu
more_vert
js学习总结----轮播图的插件化封装

作者:dayu

; 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)

js学习总结----轮播图的插件化封装

原文地址:http://www.cnblogs.com/diasa-fly/p/7193018.html