js學習總結----輪播圖的外掛程式化封裝

標籤：bsp   banner   span   new   event   name   end   nim   ntb   

具體代碼如下:

~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學習總結----輪播圖的外掛程式化封裝