關於輪播圖的技術理解你知道多少

眾所周知，輪播圖現今在網頁中佔據著必不可少的地位。

任何的一個網站，一個網頁，都會出現一個輪播圖，而輪播圖更是利用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的時候，這個時候，顯示的是最後一張圖，這張圖下面那張圖就是第一張圖的克隆圖，因此，這個時候，小點的樣式就需要添加給第一個點。

完成以上操作之後，簡單的輪播圖就做好了。