製作這個簡單的輪播圖之前，你必須掌握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將其封裝

封裝的動畫函式程式碼