欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一步一步教你寫淡入淡出帶注釋的圖片輪播插件（一）

 更新時(shí)間：2010年10月11日 21:26:59   作者：  
抽空寫了個類似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個輕量級原生小插件吧，但還是分享出來，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。
前幾天在blueIdea上看到一個淡入淡出的帶注釋的圖片輪播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代碼，雖然效果達(dá)到了，但是有幾個地方本人有不同的看法：

1.那位作者的思路是隱藏掉真正的圖片列表，而新建一個div，通過不斷push當(dāng)前圖片到那個div的innerHTML里的方式來做一個一個交替變化。思路雖然有些新意，但是從目標(biāo)效果的運(yùn)行邏輯來看，通過改變列表元素的z-index值來實(shí)現(xiàn)交替變換其實(shí)更符合這個效果邏輯的初衷。

2.那位作者雖然對代碼做了一定程度的封裝，但封裝的還是不很好，在效果的可配置上做的不很好，于是乎，這只能是一個效果，而不能作為一個可配置的插件。

（ps：以上觀點(diǎn)純屬就事論事，無任何懷疑此作者功力的意思。且不同人有不同看法。純屬個人觀點(diǎn)）

　　所以，我自己也抽空寫了個類似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個輕量級原生小插件吧，但還是分享出來，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。先上個最終的效果圖吧：

好了，Let's go！開始我們的第一部分吧！
第一部分我們要達(dá)到的目標(biāo)有：
1.建立一個大的框架，實(shí)現(xiàn)變換的邏輯，同時(shí)建立良好的代碼結(jié)構(gòu)，為以后的功能擴(kuò)展打好基礎(chǔ)。（好的開始是成功的一半?。?
2.第一部分要實(shí)現(xiàn)的效果為圖片自動切換（僅僅是這一個功能）。
　　首先要有清晰地思路，要實(shí)現(xiàn)這一個效果，我們一定是調(diào)用一個初始化函數(shù)init()-->init()中開始變換第一張圖片到下一張，不妨?xí)憾ㄟ@個功能函數(shù)為pos()-->要實(shí)現(xiàn)自動交替變換，那么肯定需要一個自動變換的功能函數(shù)auto()-->auto()中自動變換應(yīng)該有兩個方向，向前和向后，那么這個功能我們也可以通過一個函數(shù)來實(shí)現(xiàn)，暫定move()-->move()中是指定向上或向下一張變換，那么就可以回歸到我們的變換函數(shù)pos()中！
　　那么，我們就建立了一套完整可行的邏輯體系。根據(jù)以上邏輯，我們用代碼結(jié)構(gòu)來表示如下：
復(fù)制代碼 代碼如下:

var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動運(yùn)行時(shí)間；index（可選）：開始的運(yùn)行的圖片序號
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(); //自動運(yùn)行
}
}
}();

以上只是我個人的編碼習(xí)慣：把功能塊都寫在一個閉包里，減少命名沖突，避免全局變量污染。（但是這樣會有個問題，所有函數(shù)都在閉包里，很可能會導(dǎo)致ie內(nèi)存泄露，所以還有另外種更好的方式：只把初始化函數(shù)寫入閉包，其他功能通過原型內(nèi)建。這樣同樣可以避免命名沖突和全局變量污染，又同時(shí)減輕了內(nèi)存壓力。這個優(yōu)化方案將在下一部分一起說明）
好了，大的框架出來了，我們其實(shí)就成功了一半了，以下再根據(jù)每個模塊具體的功能充實(shí)函數(shù)。由于dom選擇器使我們最常使用的功能，所以這里預(yù)先定義了兩個全局函數(shù)
復(fù)制代碼 代碼如下:

function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}

相信大家都懂。
下面是每個模塊函數(shù)的拆解：
init模塊：
復(fù)制代碼 代碼如下:

init:function(options){ //options參數(shù)：id（必選）：圖片列表父標(biāo)簽id；auto（可選）：自動運(yùn)行時(shí)間；index（可選）：開始的運(yùn)行的圖片序號
var wp = H$(options.id), // 獲取圖片列表父元素
ul = H$$('ul',wp)[0], // 獲取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動運(yùn)行間隔
this.index = options.position?options.position:0; //開始運(yùn)行的圖片序號（從0開始）
this.l = li.length;
this.cur = this.z = 0; //當(dāng)前顯示的圖片序號&&z-index變量
this.pos(this.index); //變換函數(shù)
},

auto：
復(fù)制代碼 代碼如下:

auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},

move：
復(fù)制代碼 代碼如下:

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; //下一張或上一張的序號（注意三元選擇符的運(yùn)用）
this.pos(m); //變換到上一張或下一張
},

pos：
復(fù)制代碼 代碼如下:

pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一
this.cur = i; //綁定當(dāng)前顯示圖片的正確序號
this.auto(); //自動運(yùn)行
}

好了，總的源碼是這樣的：

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

恩，這一部分到此結(jié)束吧，下一部分將增加淡入淡出效果和剛才提到了盡量規(guī)避閉包引起的內(nèi)存泄露的優(yōu)化方案！

相關(guān)文章

最新評論