詳解JavaScript輪播圖技術(shù)理解

時(shí)間：2023-09-06 04:24:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-06 04:24:01 來源：網(wǎng)站運(yùn)營

詳解JavaScript輪播圖技術(shù)理解：眾所周知，輪播圖現(xiàn)今在網(wǎng)頁中占據(jù)著必不可少的地位。任何的一個(gè)網(wǎng)站，一個(gè)網(wǎng)頁，都會(huì)出現(xiàn)一個(gè)輪播圖，而輪播圖更是利用JavaScript做出的一個(gè)比較基礎(chǔ)的動(dòng)畫。下面是我本人對(duì)寫輪播圖的一點(diǎn)見解，很多地方可能不是很全面，甚至可能說是錯(cuò)誤的，希望大家多多指點(diǎn)。

下面這個(gè)是我自己閑暇時(shí)隨便做的一個(gè)輪播圖：

我覺得輪播圖中最主要的是要理解到圖片為什么會(huì)滑動(dòng)，是怎么控制的。上面這個(gè)我自己做的，是搭好的一個(gè)結(jié)構(gòu)，在無序列表中插入需要的圖片。然后在插入圖片的后面添加一個(gè)空的無序列表，作為輪播圖中下方的小點(diǎn)。

然后就是css中書寫樣式了，首先肯定得把無序列表中的li從從上至下排列變?yōu)樗椒较蚺帕?，也就是給li添加一個(gè)float屬性；然后有一點(diǎn)需要注意，輪播圖外面的大盒子必須設(shè)置為圖片的大小，超出的隱藏，這樣可以剛剛好顯示出一張圖片。然后裝圖片的ul的寬度必須大于或者等于所有圖片總寬度。同樣，這里也需要運(yùn)用一個(gè)定位的知識(shí)，子絕父相。給class為box的盒子設(shè)置相對(duì)定位，裝圖片的ul設(shè)置絕對(duì)定位。這里，盡管輪播圖下面幾個(gè)點(diǎn)沒有，但是我們要把樣式先寫好，然后后面通過JavaScript添加。

主要樣式如下：




在HTML文件和css樣式表都已經(jīng)寫好之后，我們就可以開始書寫js代碼了，讓圖片動(dòng)起來。

在JavaScript中讓圖片動(dòng)起來的核心函數(shù)是setInterval(function（）{}，value);這個(gè)函數(shù)是一個(gè)定時(shí)器，第一個(gè)參數(shù)是你想讓某個(gè)對(duì)象執(zhí)行的事件或者動(dòng)作，然后第二個(gè)參數(shù)value則是時(shí)間，意思是多少時(shí)間執(zhí)行一次。

然后在輪播圖中，想讓圖片動(dòng)起來并且從視覺上看沒什么異樣，我們首先需要克隆第一張圖片，并且將第一張圖片加在最后。具體代碼如下：




這個(gè)代碼是用jQuery書寫的，首先獲取到輪播圖那個(gè)大盒子，然后再找到輪播的圖片這個(gè)對(duì)象，然后用first（）方法找到第一張照片，并且用clone（）這個(gè)方法將第一張照片克隆，最后用append（）方法把克隆下來的這張照片添加到所有輪播圖片的后面，這樣克隆工作就完成了。

接下來就是讓這個(gè)圖片動(dòng)起來了，動(dòng)起來很簡單，只需要設(shè)置一個(gè)定時(shí)器就ok，代碼如下：




這時(shí)定時(shí)器中的move（）函數(shù)并沒有定義，接下來我們就定義這個(gè)函數(shù)，代碼如下：




首先要定義一個(gè)變量i，初始值為0，每執(zhí)行一次定時(shí)器，i的值便會(huì)加1。在定義一個(gè)size值，令其等于輪播圖中圖片的數(shù)量。然后讓裝所有圖片的容器往左移動(dòng)圖片的寬度*i，這樣在定時(shí)器的配合之下，圖片就會(huì)一張一張的一次展示?？上攵?，i的值肯定有個(gè)范圍，不可能讓它永遠(yuǎn)的加大，因此在move函數(shù)中，我們需要一個(gè)判定。當(dāng)i=size的時(shí)候，這個(gè)時(shí)候輪播圖中的照片肯定已經(jīng)到了最后一張，這個(gè)時(shí)候我們前面克隆了第一張照片加在最后，因此這張照片雖然是最后一張，但是其實(shí)它是第一張照片。這時(shí)，我們就需要重置i的值，令i=1；并且通過jQuery控制樣式，令裝照片的容器回到初始位置，開始新的一次運(yùn)動(dòng)。

最后就是初始圖片中的那幾個(gè)點(diǎn)了，這個(gè)更簡單了，我們獲取了size的值之后，再通過for循環(huán)，就可以添加那幾個(gè)點(diǎn)了。代碼如下：




這個(gè)難點(diǎn)在于怎么讓小點(diǎn)的位置隨著圖片的移動(dòng)而移動(dòng)。首先我們默認(rèn)將在css中定義好的樣式賦予第一個(gè)小點(diǎn)。代碼如下：

然后就是在move函數(shù)中定義小點(diǎn)的相應(yīng)的移動(dòng),代碼如下：




很明顯，小點(diǎn)的樣式也是通過i來確定的。這里有一個(gè)誤區(qū)，很多人會(huì)認(rèn)為第一個(gè)小點(diǎn)就是1，但是其實(shí)不是，因?yàn)閿?shù)組是從0開始的，所以第一個(gè)小點(diǎn)是0。i的值代表了顯示的是第i-1張圖片，所以這個(gè)時(shí)候只需要將樣式賦予第i個(gè)點(diǎn)就行了，并且同時(shí)要清除其他的點(diǎn)的樣式。特殊的當(dāng)i=size-1的時(shí)候，這個(gè)時(shí)候，顯示的是最后一張圖，這張圖下面那張圖就是第一張圖的克隆圖，因此，這個(gè)時(shí)候，小點(diǎn)的樣式就需要添加給第一個(gè)點(diǎn)。




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