圖片輪播原理解析

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

2、，就是要讓這些圖片以類似于電影膠片的原理朝著一個方向進(jìn)行滑動。這里的javascript代碼主要是在改變ul的left坐標(biāo)。默認(rèn)最開始ul的left的值為0，這時正好顯示出第一幅圖片。Javascript代碼中，如果當(dāng)前的left坐標(biāo)為0時，設(shè)定一個方向的屬性flag=go_to_left；當(dāng)left坐標(biāo)變成-2700時，即當(dāng)圖片從左到右播放到第四張的時候，flag=go_to_right。而在接下來的動畫處理代碼中，是在循環(huán)的改變left的值。經(jīng)過上面的showImage（）函數(shù)后，最后通過setInterval（）來每間隔1秒鐘調(diào)用動畫處理函數(shù)，是的圖片運(yùn)動起來。手動控制圖片上面這個實(shí)例比

3、較簡單，也比較傻。大家可以試想一下，在用戶剛剛看完第三張圖，接著第四張圖就播放了，然后反向，又看到了第三張圖。這樣往復(fù)下去，剛剛看到的圖片又播放了出來，而想看更早的圖片，又還要等到很久才播放出來。這樣人的短時記憶會比較不均勻，那么網(wǎng)站圖片的曝光率和廣告展示效果就會打折扣。網(wǎng)站的內(nèi)容給人不好的感覺，用戶體驗(yàn)就會比較差，進(jìn)而產(chǎn)品的可用性也不會很好。 下面我再將上面的HTML、CSS和javascript代碼做一個改動，變成一個新的形式。這種形式就是，圖片不會自動的循環(huán)播放，而是給用戶提供一個導(dǎo)航器，讓用戶自己看他們想看的圖片。在HTML代碼中增加這樣一個導(dǎo)航，給用戶提供4個控件，對應(yīng)上面的4幅圖片

4、在CSS代碼中，讓這個導(dǎo)航塊相對于div容器，位于右下角，而且層次要高于圖片，要浮于圖片之上在javascript代碼中加入這樣的幾行就可以實(shí)現(xiàn)，當(dāng)鼠標(biāo)放在了某個數(shù)字上的時候，ul的left發(fā)生相應(yīng)的變化。each（）方法是遍歷li對象數(shù)組，里面的index就是這個數(shù)組中對應(yīng)的下標(biāo)，index的值與導(dǎo)航的對應(yīng)關(guān)系為導(dǎo)航器中的標(biāo)簽Index的值Left的值10-900 * index = 021-900 * index = -90032-900 * index = -180043-900 * index = -2700圖片每滑動一次，left的變化都是-900的倍數(shù)。這樣就實(shí)現(xiàn)了當(dāng)鼠標(biāo)放在導(dǎo)航器

5、的數(shù)字上，ul的left坐標(biāo)發(fā)生變化的效果。這種效果比較死板，但是可以由用戶自己操作。圖片自動向一個方向播放接下來，我把之前的新聞欄文字滾動效果解析中的技術(shù)，應(yīng)用到圖片輪播效果中，讓若干圖片一直朝著同一個方向按照一定的時間間隔持續(xù)的運(yùn)動，實(shí)現(xiàn)圖片輪播的效果。這次給HTML代碼中的圖片帶上鏈接，點(diǎn)擊圖片后頁面會跳轉(zhuǎn)，在瀏覽器的新標(biāo)簽中會打開一個新頁面。這是精華部分。動畫控制函數(shù)中，通過width（）函數(shù)獲得類名稱為“.img”的ul中的第一個li的寬度，其實(shí)每個li的寬度都是一樣的。然后在animate動畫函數(shù)中讓ul的marginLeft屬性變?yōu)樨?fù)的一個寬度，這樣處理后的效果就是ul正好向左運(yùn)動了一個圖片的寬度，因?yàn)閐iv的overflow：hidden，所以第一幅圖被隱藏，從而顯示出了第二幅圖。而當(dāng)?shù)谒姆鶊D顯示出來后，程序中的appendTo（）方法會把第一幅圖的li標(biāo)簽追加到第四幅圖中，這樣就開始了第二輪的圖片播放。按照這樣的原理循環(huán)往復(fù)，就實(shí)現(xiàn)了圖片輪播的效果。另外我也實(shí)驗(yàn)了一下，將上圖的代碼中的marginLeft改為left，效果也是相同的。因?yàn)閐iv的position：relative，是相對定位，而div的子節(jié)點(diǎn)ul的position：absolute，是絕對定位