首先來分析一下輪播圖效果的實現原理：

1、父元素作為顯示窗口，大小固定超出部分隱藏，即設置overflow:hidden;

2、子元素存放圖片列表用ul，ul固定定位，參照為父元素，即父元素position:relative;ul元素position:absolute;

3、一個li即一張圖片的寬度為父元素的顯示寬度

4、初始時，ul的left為0，這時第一張圖片即第一個li顯示

5、點擊下一張按鈕，將整個ul左移，使第二個li對齊父元素的左邊框，此時ul的left為負的一個li的寬度

6、點擊上一張按鈕，將整個ul右移

7、對特殊情況進行處理，即第一張圖時點上一張，最后一張圖時點下一張

第一張圖時點上一張，我們滾動到最后一張圖，整個ul左移，即把left值改為負的n-1張圖的寬度；

最后一張圖時點下一張，我們滾到第一張圖的位置，整個ul右移，即把left值改為0

用一張圖來幫助理解：

修改ul元素的left值很簡單ul.style.left=設定值，就可以了，但我們想有一個滑動的效果，那我們需要用setInterval來實現

最后的效果如下：

動圖不能錄制太大CSDN有2M的限制_(:з