圖片輪播原理解析

1、圖片輪播原理解析本網(wǎng)站首頁(yè)和自我介紹子頁(yè)面的圖片輪播效果就是按照本文的原理實(shí)現(xiàn)的正向/反向圖片滾動(dòng)在一些網(wǎng)站上，會(huì)經(jīng)常看到有這樣的特效，就是圖片輪番的滾動(dòng)播放。要么從一個(gè)方向播放完后，又反向的播放回去，即1-2-3-4，然后4-3-2-1 。這個(gè)效果的實(shí)現(xiàn)代碼很簡(jiǎn)單，只要掌握了原理就能夠做出來(lái)。     先上HTML代碼上面的CSS代碼的布局定位后，整體的標(biāo)簽結(jié)構(gòu)用下列圖表示就是然后通過(guò)div的overflow：hidden屬性設(shè)置后，顯示的效果如下當(dāng)然，在CSS里面還需要讓ul、div、li、img的外部間隔和內(nèi)部填充margin和padding都為0

2、，讓這些有著包圍關(guān)系的元素緊密的挨在一起。     接下來(lái)，就是要讓這些圖片以類似于電影膠片的原理朝著一個(gè)方向進(jìn)行滑動(dòng)。這里的javascript代碼主要是在改變ul的left坐標(biāo)。默認(rèn)最開始ul的left的值為0，這時(shí)正好顯示出第一幅圖片。Javascript代碼中，如果當(dāng)前的left坐標(biāo)為0時(shí)，設(shè)定一個(gè)方向的屬性flag=go_to_left；當(dāng)left坐標(biāo)變成-2700時(shí)，即當(dāng)圖片從左到右播放到第四張的時(shí)候，flag=go_to_right。而在接下來(lái)的動(dòng)畫處理代碼中，是在循環(huán)的改變left的值。經(jīng)過(guò)上面的showImage函數(shù)后，最后通過(guò)setI

3、nterval來(lái)每間隔1秒鐘調(diào)用動(dòng)畫處理函數(shù)，是的圖片運(yùn)動(dòng)起來(lái)。手動(dòng)控制圖片上面這個(gè)實(shí)例比較簡(jiǎn)單，也比較傻。大家可以試想一下，在用戶剛剛看完第三張圖，接著第四張圖就播放了，然后反向，又看到了第三張圖。這樣往復(fù)下去，剛剛看到的圖片又播放了出來(lái)，而想看更早的圖片，又還要等到很久才播放出來(lái)。這樣人的短時(shí)記憶會(huì)比較不均勻，那么網(wǎng)站圖片的曝光率和廣告展示效果就會(huì)打折扣。網(wǎng)站的內(nèi)容給人不好的感覺(jué)，用戶體驗(yàn)就會(huì)比較差，進(jìn)而產(chǎn)品的可用性也不會(huì)很好。     下面我再將上面的HTML、CSS和javascript代碼做一個(gè)改動(dòng)，變成一個(gè)新的形式。這種形式就是，圖片不會(huì)自動(dòng)

4、的循環(huán)播放，而是給用戶提供一個(gè)導(dǎo)航器，讓用戶自己看他們想看的圖片。在HTML代碼中增加這樣一個(gè)導(dǎo)航<ul>，給用戶提供4個(gè)控件，對(duì)應(yīng)上面的4幅圖片在CSS代碼中，讓這個(gè)導(dǎo)航塊相對(duì)于div容器，位于右下角，而且層次要高于圖片，要浮于圖片之上在javascript代碼中加入這樣的幾行就可以實(shí)現(xiàn)，當(dāng)鼠標(biāo)放在了某個(gè)數(shù)字上的時(shí)候，ul的left發(fā)生相應(yīng)的變化。each方法是遍歷li對(duì)象數(shù)組，里面的index就是這個(gè)數(shù)組中對(duì)應(yīng)的下標(biāo)，index的值與導(dǎo)航的對(duì)應(yīng)關(guān)系為導(dǎo)航器中的標(biāo)簽Index的值Left的值10-900 * index = 021-900 * index = -90032-900

5、 * index = -180043-900 * index = -2700圖片每滑動(dòng)一次，left的變化都是-900的倍數(shù)。這樣就實(shí)現(xiàn)了當(dāng)鼠標(biāo)放在導(dǎo)航器的數(shù)字上，ul的left坐標(biāo)發(fā)生變化的效果。這種效果比較死板，但是可以由用戶自己操作。圖片自動(dòng)向一個(gè)方向播放接下來(lái)，我把之前的新聞欄文字滾動(dòng)效果解析中的技術(shù)，應(yīng)用到圖片輪播效果中，讓假設(shè)干圖片一直朝著同一個(gè)方向按照一定的時(shí)間間隔持續(xù)的運(yùn)動(dòng)，實(shí)現(xiàn)圖片輪播的效果。這次給HTML代碼中的圖片帶上鏈接，點(diǎn)擊圖片后頁(yè)面會(huì)跳轉(zhuǎn)，在瀏覽器的新標(biāo)簽中會(huì)打開一個(gè)新頁(yè)面。這是精華部分。動(dòng)畫控制函數(shù)中，通過(guò)width函數(shù)獲得類名稱為“.img”的ul中的第一個(gè)li

6、的寬度，其實(shí)每個(gè)li的寬度都是一樣的。然后在animate動(dòng)畫函數(shù)中讓ul的marginLeft屬性變?yōu)樨?fù)的一個(gè)寬度，這樣處理后的效果就是ul正好向左運(yùn)動(dòng)了一個(gè)圖片的寬度，因?yàn)閐iv的overflow：hidden，所以第一幅圖被隱藏，從而顯示出了第二幅圖。而當(dāng)?shù)谒姆鶊D顯示出來(lái)后，程序中的appendTo方法會(huì)把第一幅圖的li標(biāo)簽追加到第四幅圖中，這樣就開始了第二輪的圖片播放。按照這樣的原理循環(huán)往復(fù)，就實(shí)現(xiàn)了圖片輪播的效果。另外我也實(shí)驗(yàn)了一下，將上圖的代碼中的marginLeft改為left，效果也是相同的。因?yàn)閐iv的position：relative，是相對(duì)定位，而div的子節(jié)點(diǎn)ul的position：absolute，是絕對(duì)定位，所以u(píng)