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

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

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

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

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

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

自動切換及鼠標交互功能實現

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

結語

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