圖片輪播原理解析

《圖片輪播原理解析》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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

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

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

，給用

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

5、航器的數(shù)字上，ul的left坐標發(fā)生變化的效果。這種效果比較死板，但是可以由用戶自己操作。圖片自動向一個方向播放接下來，我把之前的《新聞欄文字滾動效果解析》中的技術(shù)，應(yīng)用到圖片輪播效果中，讓若干圖片一直朝著同一個方向按照一定的時間間隔持續(xù)的運動，實現(xiàn)圖片輪播的效果。這次給HTML代碼中的圖片帶上鏈接，點擊圖片后頁面會跳轉(zhuǎn)，在瀏覽器的新標簽中會打開一個新頁面。這是精華部分。動畫控制函數(shù)中，通過width（）函數(shù)獲得類名稱為“.img”的ul中的第一個li的寬度，其實每個li的寬度都是一樣的。然后在animate動畫函數(shù)中讓ul的marginLeft屬性變?yōu)樨摰囊粋€寬度，這樣處理后的效果就是ul

6、正好向左運動了一個圖片的寬度，因為div的overflow：hidden，所以第一幅圖被隱藏，從而顯示出了第二幅圖。而當(dāng)?shù)谒姆鶊D顯示出來后，程序中的appendTo（）方法會把第一幅圖的li標簽追加到第四幅圖中，這樣就開始了第二輪的圖片播放。按照這樣的原理循環(huán)往復(fù)，就實現(xiàn)了圖片輪播的效果。另外我也實驗了一下，將上圖的代碼中的marginLeft改為left，效果也是相同的。因為div的position：relative，是相對定位，而div的子節(jié)點ul的position：absolute，是絕對定位，所以ul的left屬性就是ul相對于div的左坐標的值，left=0表示ul的左邊沿與div

7、的左邊沿對齊，而當(dāng)left=-一幅圖片的寬度，則正好顯示出第二幅圖，第一幅圖被隱藏掉了。