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

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

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

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