1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個(gè)div，通過(guò)不斷push當(dāng)前圖片到那個(gè)div的innerHTML里的方式來(lái)做一個(gè)一個(gè)交替變化。思路雖然有些新意，但是從目標(biāo)效果的運(yùn)行邏輯來(lái)看，通過(guò)改變列表元素的z-index值來(lái)實(shí)現(xiàn)交替變換其實(shí)更符合這個(gè)效果邏輯的初衷。
2.那位作者雖然對(duì)代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，于是乎，這只能是一個(gè)效果，而不能作為一個(gè)可配置的插件。
（ps：以上觀點(diǎn)純屬就事論事，無(wú)任何懷疑此作者功力的意思。且不同人有不同看法。純屬個(gè)人觀點(diǎn)）
所以，我自己也抽空寫(xiě)了個(gè)類似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個(gè)最終的效果圖吧： 
好了，Let's go！開(kāi)始我們的第一部分吧！
第一部分我們要達(dá)到的目標(biāo)有：
1.建立一個(gè)大的框架，實(shí)現(xiàn)變換的邏輯，同時(shí)建立良好的代碼結(jié)構(gòu)，為以后的功能擴(kuò)展打好基礎(chǔ)。（好的開(kāi)始是成功的一半?。?
2.第一部分要實(shí)現(xiàn)的效果為圖片自動(dòng)切換（僅僅是這一個(gè)功能）。
首先要有清晰地思路，要實(shí)現(xiàn)這一個(gè)效果，我們一定是調(diào)用一個(gè)初始化函數(shù)init()-->init()中開(kāi)始變換第一張圖片到下一張，不妨?xí)憾ㄟ@個(gè)功能函數(shù)為pos()-->要實(shí)現(xiàn)自動(dòng)交替變換，那么肯定需要一個(gè)自動(dòng)變換的功能函數(shù)auto()-->auto()中自動(dòng)變換應(yīng)該有兩個(gè)方向，向前和向后，那么這個(gè)功能我們也可以通過(guò)一個(gè)函數(shù)來(lái)實(shí)現(xiàn)，暫定move()-->move()中是指定向上或向下一張變換，那么就可以回歸到我們的變換函數(shù)pos()中！
那么，我們就建立了一套完整可行的邏輯體系。根據(jù)以上邏輯，我們用代碼結(jié)構(gòu)來(lái)表示如下：
代碼如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
this.pos(this.index); //變換函數(shù)
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
this.pos(m); //變換到上一張或下一張
},
pos:function(i){
this.auto(); //自動(dòng)運(yùn)行
}
}
}();
以上只是我個(gè)人的編碼習(xí)慣：把功能塊都寫(xiě)在一個(gè)閉包里，減少命名沖突，避免全局變量污染。（但是這樣會(huì)有個(gè)問(wèn)題，所有函數(shù)都在閉包里，很可能會(huì)導(dǎo)致ie內(nèi)存泄露，所以還有另外種更好的方式：只把初始化函數(shù)寫(xiě)入閉包，其他功能通過(guò)原型內(nèi)建。這樣同樣可以避免命名沖突和全局變量污染，又同時(shí)減輕了內(nèi)存壓力。這個(gè)優(yōu)化方案將在下一部分一起說(shuō)明）
好了，大的框架出來(lái)了，我們其實(shí)就成功了一半了，以下再根據(jù)每個(gè)模塊具體的功能充實(shí)函數(shù)。由于dom選擇器使我們最常使用的功能，所以這里預(yù)先定義了兩個(gè)全局函數(shù)
代碼如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每個(gè)模塊函數(shù)的拆解：
init模塊：
代碼如下:
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動(dòng)運(yùn)行時(shí)間；index（可選）：開(kāi)始的運(yùn)行的圖片序號(hào)
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動(dòng)運(yùn)行間隔
this.index = options.position?options.position:0; //開(kāi)始運(yùn)行的圖片序號(hào)（從0開(kāi)始）
this.l = li.length;
this.cur = this.z = 0; //當(dāng)前顯示的圖片序號(hào)&&z-index變量
this.pos(this.index); //變換函數(shù)
},
auto：
代碼如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
代碼如下:
move:function(i){//參數(shù)i有兩種選擇，1和-1,1代表運(yùn)行到下一張，-1代表運(yùn)行到上一張
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一張或上一張的序號(hào)（注意三元選擇符的運(yùn)用）
this.pos(m); //變換到上一張或下一張
},
pos：
代碼如下:
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號(hào)
this.auto(); //自動(dòng)運(yùn)行
}
好了，總的源碼是這樣的：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
恩，這一部分到此結(jié)束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規(guī)避閉包引起的內(nèi)存泄露的優(yōu)化方案！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
