眾所周知，輪播圖現今在網頁中佔據著必不可少的地位。
任何的一個網站，一個網頁，都會出現一個輪播圖，而輪播圖更是利用JavaScript做出的一個比較基礎的動畫。
下面是我本人對寫輪播圖的一點見解，很多地方可能不是很全面，甚至可能說是錯誤的，希望老師們指點。
下面這個是我自己閒暇時隨便做的一個輪播圖：
我覺得輪播圖中最主要的是要理解到圖片為什麼會滑動，是怎麼控制的。上面這個我自己做的，是搭好的一個結構，在無序列表中插入需要的圖片。
然後在插入圖片的後面新增一個空的無序列表，作為輪播圖中下方的小點。
然後就是css中書寫樣式了，首先肯定得把無序列表中的li從從上至下排列變為水平方向排列，也就是給li新增一個float屬性；
然後有一點需要注意，輪播圖外面的大盒子必須設定為圖片的大小，超出的隱藏，這樣可以剛剛好顯示出一張圖片。
然後裝圖片的ul的寬度必須大於或者等於所有圖片總寬度。同樣，這裡也需要運用一個定位的知識，子絕父相。
給class為box的盒子設定相對定位，裝圖片的ul設定絕對定位。這裡，儘管輪播圖下面幾個點沒有，但是我們要把樣式先寫好，然後後面通過JavaScript新增。
主要樣式如下：
在HTML檔案和css樣式表都已經寫好之後，我們就可以開始書寫js程式碼了，讓圖片動起來。
在JavaScript中讓圖片動起來的核心函式是setInterval(function（）{}，value);
這個函式是一個定時器，第一個引數是你想讓某個物件執行的事件或者動作，然後第二個引數value則是時間，意思是多少時間執行一次。
然後在輪播圖中，想讓圖片動起來並且從視覺上看沒什麼異樣，我們首先需要克隆第一張圖片，並且將第一張圖片加在最後。具體程式碼如下：
這個程式碼是用jQuery書寫的，首先獲取到輪播圖那個大盒子，然後再找到輪播的圖片這個物件；
然後用first（）方法找到第一張照片，並且用clone（）這個方法將第一張照片克隆；
最後用append（）方法把克隆下來的這張照片新增到所有輪播圖片的後面，這樣克隆工作就完成了。
接下來就是讓這個圖片動起來了，動起來很簡單，只需要設定一個定時器就ok，程式碼如下：
這時定時器中的move（）函式並沒有定義，接下來我們就定義這個函式，程式碼如下：
首先要定義一個變數i，初始值為0，每執行一次定時器，i的值便會加1。在定義一個size值，令其等於輪播圖中圖片的數量。
然後讓裝所有圖片的容器往左移動圖片的寬度*i，這樣在定時器的配合之下，圖片就會一張一張的一次展示。
可想而知，i的值肯定有個範圍，不可能讓它永遠的加大，因此在move函式中，我們需要一個判定。
當i=size的時候，這個時候輪播圖中的照片肯定已經到了最後一張，這個時候我們前面克隆了第一張照片加在最後，因此這張照片雖然是最後一張，但是其實它是第一張照片。
這時，我們就需要重置i的值，令i=1；並且通過jQuery控制樣式，令裝照片的容器回到初始位置，開始新的一次運動。
最後就是初始圖片中的那幾個點了，這個更簡單了，我們獲取了size的值之後，再通過for迴圈，就可以新增那幾個點了。程式碼如下：
這個難點在於怎麼讓小點的位置隨著圖片的移動而移動。
首先我們預設將在css中定義好的樣式賦予第一個小點。程式碼如下：
然後就是在move函式中定義小點的相應的移動,程式碼如下：
很明顯，小點的樣式也是通過i來確定的。
這裡有一個誤區，很多人會認為第一個小點就是1，但是其實不是，因為陣列是從0開始的，所以第一個小點是0。
i的值代表了顯示的是第i-1張圖片，所以這個時候只需要將樣式賦予第i個點就行了，並且同時要清除其他的點的樣式。
特殊的當i=size-1的時候，這個時候，顯示的是最後一張圖，這張圖下面那張圖就是第一張圖的克隆圖，因此，這個時候，小點的樣式就需要新增給第一個點。
完成以上操作之後，簡單的輪播圖就做好了。