1. 程式人生 > >js學習總結----輪播圖的插件化封裝

js學習總結----輪播圖的插件化封裝

rem class 私有屬性 display settime req rda als image

具體代碼如下:

~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="" 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; //只對第一張處理 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學習總結----輪播圖的插件化封裝