一步一步教你寫淡入淡出帶注釋的圖片輪播插件（一）
編輯：關於JavaScript
前幾天在blueIdea上看到一個淡入淡出的帶注釋的圖片輪播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代碼，雖然效果達到了，但是有幾個地方本人有不同的看法：
1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個div，通過不斷push當前圖片到那個div的innerHTML裡的方式來做一個一個交替變化。思路雖然有些新意，但是從目標效果的運行邏輯來看，通過改變列表元素的z-index值來實現交替變換其實更符合這個效果邏輯的初衷。
2.那位作者雖然對代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，於是乎，這只能是一個效果，而不能作為一個可配置的插件。
（ps：以上觀點純屬就事論事，無任何懷疑此作者功力的意思。且不同人有不同看法。純屬個人觀點）
所以，我自己也抽空寫了個類似的效果，做了一定程度的封裝，雖然也只能勉強算個輕量級原生小插件吧，但還是分享出來，並做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個最終的效果圖吧：
好了，Let's go！開始我們的第一部分吧！
第一部分我們要達到的目標有：
1.建立一個大的框架，實現變換的邏輯，同時建立良好的代碼結構，為以後的功能擴展打好基礎。（好的開始是成功的一半！）
2.第一部分要實現的效果為圖片自動切換（僅僅是這一個功能）。
首先要有清晰地思路，要實現這一個效果，我們一定是調用一個初始化函數init()-->init()中開始變換第一張圖片到下一張，不妨暫定這個功能函數為pos()-->要實現自動交替變換，那麼肯定需要一個自動變換的功能函數auto()-->auto()中自動變換應該有兩個方向，向前和向後，那麼這個功能我們也可以通過一個函數來實現，暫定move()-->move()中是指定向上或向下一張變換，那麼就可以回歸到我們的變換函數pos()中！
那麼，我們就建立了一套完整可行的邏輯體系。根據以上邏輯，我們用代碼結構來表示如下：
復制代碼 代碼如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號
this.pos(this.index); //變換函數
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張
this.pos(m); //變換到上一張或下一張
},
pos:function(i){
this.auto(); //自動運行
}
}
}();
以上只是我個人的編碼習慣：把功能塊都寫在一個閉包裡，減少命名沖突，避免全局變量污染。（但是這樣會有個問題，所有函數都在閉包裡，很可能會導致ie內存洩露，所以還有另外種更好的方式：只把初始化函數寫入閉包，其他功能通過原型內建。這樣同樣可以避免命名沖突和全局變量污染，又同時減輕了內存壓力。這個優化方案將在下一部分一起說明）
好了，大的框架出來了，我們其實就成功了一半了，以下再根據每個模塊具體的功能充實函數。由於dom選擇器使我們最常使用的功能，所以這裡預先定義了兩個全局函數
復制代碼 代碼如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每個模塊函數的拆解：
init模塊：
復制代碼 代碼如下:
init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動運行間隔
this.index = options.position?options.position:0; //開始運行的圖片序號（從0開始）
this.l = li.length;
this.cur = this.z = 0; //當前顯示的圖片序號&&z-index變量
this.pos(this.index); //變換函數
},
auto：
復制代碼 代碼如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
復制代碼 代碼如下:
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1: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; //綁定當前顯示圖片的正確序號
this.auto(); //自動運行
}
好了，總的源碼是這樣的：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
恩，這一部分到此結束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規避閉包引起的內存洩露的優化方案！
1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個div，通過不斷push當前圖片到那個div的innerHTML裡的方式來做一個一個交替變化。思路雖然有些新意，但是從目標效果的運行邏輯來看，通過改變列表元素的z-index值來實現交替變換其實更符合這個效果邏輯的初衷。
2.那位作者雖然對代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，於是乎，這只能是一個效果，而不能作為一個可配置的插件。
（ps：以上觀點純屬就事論事，無任何懷疑此作者功力的意思。且不同人有不同看法。純屬個人觀點）
所以，我自己也抽空寫了個類似的效果，做了一定程度的封裝，雖然也只能勉強算個輕量級原生小插件吧，但還是分享出來，並做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個最終的效果圖吧：
好了，Let's go！開始我們的第一部分吧！
第一部分我們要達到的目標有：
1.建立一個大的框架，實現變換的邏輯，同時建立良好的代碼結構，為以後的功能擴展打好基礎。（好的開始是成功的一半！）
2.第一部分要實現的效果為圖片自動切換（僅僅是這一個功能）。
首先要有清晰地思路，要實現這一個效果，我們一定是調用一個初始化函數init()-->init()中開始變換第一張圖片到下一張，不妨暫定這個功能函數為pos()-->要實現自動交替變換，那麼肯定需要一個自動變換的功能函數auto()-->auto()中自動變換應該有兩個方向，向前和向後，那麼這個功能我們也可以通過一個函數來實現，暫定move()-->move()中是指定向上或向下一張變換，那麼就可以回歸到我們的變換函數pos()中！
那麼，我們就建立了一套完整可行的邏輯體系。根據以上邏輯，我們用代碼結構來表示如下：
復制代碼 代碼如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號
this.pos(this.index); //變換函數
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張
this.pos(m); //變換到上一張或下一張
},
pos:function(i){
this.auto(); //自動運行
}
}
}();
以上只是我個人的編碼習慣：把功能塊都寫在一個閉包裡，減少命名沖突，避免全局變量污染。（但是這樣會有個問題，所有函數都在閉包裡，很可能會導致ie內存洩露，所以還有另外種更好的方式：只把初始化函數寫入閉包，其他功能通過原型內建。這樣同樣可以避免命名沖突和全局變量污染，又同時減輕了內存壓力。這個優化方案將在下一部分一起說明）
好了，大的框架出來了，我們其實就成功了一半了，以下再根據每個模塊具體的功能充實函數。由於dom選擇器使我們最常使用的功能，所以這裡預先定義了兩個全局函數
復制代碼 代碼如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每個模塊函數的拆解：
init模塊：
復制代碼 代碼如下:
init:function(options){ //options參數：id（必選）：圖片列表父標簽id；auto（可選）：自動運行時間；index（可選）：開始的運行的圖片序號
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動運行間隔
this.index = options.position?options.position:0; //開始運行的圖片序號（從0開始）
this.l = li.length;
this.cur = this.z = 0; //當前顯示的圖片序號&&z-index變量
this.pos(this.index); //變換函數
},
auto：
復制代碼 代碼如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
復制代碼 代碼如下:
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1: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; //綁定當前顯示圖片的正確序號
this.auto(); //自動運行
}
好了，總的源碼是這樣的：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
恩，這一部分到此結束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規避閉包引起的內存洩露的優化方案！
小編推薦
熱門推薦