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

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

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

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

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

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

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

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

結(jié)語

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