製作這個簡單的輪播圖之前，你必須掌握html、css、以及JavaScript中的節點操作，定時器的使用，條件語句的使用以及JS修改樣式和動畫原理。
輪播圖對於網頁來說是個常見也可以說是必備的部分，而輪播圖的形式也是各式各樣，有簡約的也有炫酷的。當然，這裡我就只說簡約的全屏輪播圖水平無縫滾動。
首先是給出一個div標籤，並且給這個標籤設置寬高（寬高要和圖片一致，否則給圖片設置居中）以及溢出隱藏（overflow:hidden）並設置定位為相對定位（position:relative），然後用一個有序列表（ul）標籤將圖片放在li標籤裡面，ul標籤的高度要與圖片高度一致，寬度是圖片的數量乘以圖片的寬度，定位設置為絕對定位（position:absolute），而li標籤設置左浮動。靜態工作基本完成。
而輪播圖的播放則需要用到動畫和定時器，這裡我用的是已經封裝好的動畫函數。在js中通過獲取ul的子節點來獲取到li的一個數組，再通過這個數組的長度以及圖片的寬度來計算出ul的寬度。為了實現無縫滾動，我們必須克隆第一張圖片並將其放在ul後面（通過cloneNode以及appendChild來實現 ），一開始聲明變量index，並賦值為0，然後進行判斷，如果index值大於li數組的長度的話，將ul的left值重置為0，並將index值設置為1（因為輪播圖的最後一張和第一張是一樣的，所以當輪播圖的最後一張出現在頁面的時候，我們將其left值設置為0使其直接跳到第一張，而肉眼是捕捉不到這個瞬間的，而當播放到最後一張時，下一張出現在頁面的是輪播圖的第二張，所以index值為1）。當然輪播圖的滾動要有個過渡效果，所以ul的left的目標值為當前index值乘以圖片寬度。在定時器中設定一個刷新時間，並且每刷新一次，讓index值加一（也就是index++）。到這裡，輪播圖的向左無縫滾動就完成了。而向右無縫滾動我是設置在點擊上，同時，鼠標在移入和移出輪播圖的時候，我分別設置了清除定時器和執行定時器。這是為了避免自動播放和點擊的衝突。在點擊前一張，也就是向右滾動的時候，index值減一（也就是index- -），並且做一個判斷，就是當index值小於0的時候，重新給index賦值為li數組長度減去二（我這裡li的長度賦給了len，所以index=len-2），而ul的left值為-(len-1)乘以圖片寬度，記得加上單位px。這個上面講的最後一張跳到第一張同個道理，當圖片播放到第一張的時候，再按一下，應跳轉到實際圖片數量的最後一張，所以，當圖片到第一張時，會瞬間跳到我們克隆的那張圖片上。
下面附上js代碼截圖,因為多個地方用到判斷，所以用函數show將其封裝
封裝的動畫函數代碼
閱讀更多 千鋒H5 的文章
