前面我們制作了一個簡單的走馬燈輪播圖效果，只能通過切換按鈕來上下切換圖片，但是通常我們看到輪播圖都是帶點(diǎn)選的，當(dāng)我選擇哪張圖片的時候我們就切換到哪張圖，底下圖標(biāo)跟著圖片的輪播自動切換。 動態(tài)生成輪播頁

前面我們制作了一個簡單的走馬燈輪播圖效果，只能通過切換按鈕來上下切換圖片，但是通常我們看到輪播圖都是帶點(diǎn)選的，當(dāng)我選擇哪張圖片的時候我們就切換到哪張圖，底下圖標(biāo)跟著圖片的輪播自動切換。

動態(tài)生成輪播頁碼

我們已經(jīng)實(shí)現(xiàn)了在設(shè)置好的時間間隔內(nèi)對圖片進(jìn)行自動輪播，然后通過左右箭頭進(jìn)行圖像的切換?，F(xiàn)在新增一個頁碼（有時候只是個按鈕）。首先要實(shí)現(xiàn)底下頁碼跟隨左右切換按鈕進(jìn)行自動切換，這里的原理是將span的屬性進(jìn)行更改，為了方便，將原來的span按鈕改成了a鏈接，在picture下面添加一個page的div，里面附上和輪播圖一樣多的span元素，這樣DOM中就只有頁碼的span元素了，這樣定位起來比較方便。

動態(tài)生成頁碼數(shù)量并切換頁面

可以通過獲取img的數(shù)量動態(tài)生成頁碼數(shù)量，先獲取page元素，然后在page下動態(tài)添加span標(biāo)簽，默認(rèn)第一個span給定一個class，給這個輸定定義一個背景色，當(dāng)切換頁碼時把這個class屬性動態(tài)賦給對應(yīng)的span標(biāo)簽。接下來實(shí)現(xiàn)class"show"屬性的切換，定義一個index與move一樣初始值為0，每次點(diǎn)擊切換按鈕的時候隨著加減，然后把這個index帶入到span中去遍歷屬性，將index以外的其他span標(biāo)簽中的class屬性清空，然后將index對應(yīng)的span屬性添加class"show"屬性，這樣對應(yīng)的span就和圖片一樣動態(tài)的切換起來了。

自動切換及鼠標(biāo)交互功能實(shí)現(xiàn)

編寫了一個showPage函數(shù)，并將其加入到animate方法中，當(dāng)執(zhí)行animate時就會觸發(fā)showPage方法，這樣每次點(diǎn)擊切換按鈕的時候頁碼就會隨之變換。加上自動屬性，這樣就可以直接載入時就自動切換了，但是現(xiàn)在點(diǎn)擊或者將鼠標(biāo)移入標(biāo)簽還是無法切換到指定的頁面，接下來開始實(shí)現(xiàn)這個功能。實(shí)現(xiàn)任意切換的方法很簡單，和上下切換方法很相似，只需將沒點(diǎn)擊一次將move屬性自增1改成當(dāng)前頁的值即可。通過以上新增功能，得到了前面演示的完整效果。如果對代碼感興趣，可以嘗試運(yùn)行下列完整代碼：(代碼略)

結(jié)語

通過以上步驟，我們成功實(shí)現(xiàn)了帶點(diǎn)選的滑動輪播圖效果，讓用戶可以方便地選擇想要查看的圖片。同時，通過自動切換和鼠標(biāo)交互功能的實(shí)現(xiàn)，使得用戶體驗(yàn)更加流暢和友好。歡迎大家嘗試并優(yōu)化這段代碼，進(jìn)一步提升用戶體驗(yàn)。