首先，讓大家看效果：

然後給大家介紹一下無縫輪播圖的原理

1.我們在一個ul中會使用很多的li，每一個li中嵌入一個圖片，如果把輪播圖比喻成慢視訊的話，每一張圖片就是一幀(注意:很多新手會認為一些圖片是動態生成的，其實不然，每一張圖片已經設定在html中，只不過顯示的時候，使用overflow:hidden；將其隱藏了)，下面畫個圖讓大家方便大家理解

2：現在開始定義動畫函式animate讓ul在div中滾動，通過ul中定位中style.left屬性值配合setInterval函式，簡直完美

3.重頭戲來了，我覺得你理解了這點，就算是掌握了。

大家思考一下:怎麼用一種很巧妙的方法讓最後一張圖片和第一張圖片無縫連線

原理解釋:

1.介面初始化：ul中5個li,每一個寬度是500px; 當你設定ul的寬度的時候，直接把ul的width設為3000px;

2.當js載入的時候，將第一張圖片複製，載入到li的最後，所以ul總共有6個li，width自然是3000px;

3.然後關鍵：當輪播到第五張圖片的時候，第六張圖片可以實現無縫的切換，這個時候是會輪播到第六個li上，也就是第一張圖，這個時候要將ul的left設為0;

4.固然就回到了第一張圖，其實在顯示第六張圖的時候，其實顯示的第一張，由於直接設定left:0px；則不會出現視覺上的改變。所以在滑到第六個li的時候，我們又回到了第一張圖片的位置。不懂直接上程式碼；

4.上面就是實現無縫輪播切換，關於其他的一些左右點選切換和圖片列表都不難，沒什麼好說的，我在程式碼裡面都寫了，大家有興趣去下載看一下