第一種：

這個是之前寫的，比較草率，沒有注釋，如果這個看不懂就去看第二個，比較仔細，主要是了解他，后面都會有一些插件來使用，很方便，只要幾行代碼就可寫出各種各樣的代碼，所以，不懂的話，不要太在意，

第二種：

這個是最近剛寫的，所以比較仔細，盡量多看看這個，跟步驟結合起來應該是能看懂的：

輪播圖要實現的步驟和效果

1,顯示和隱藏左右按鈕

(1),鼠標移入，左右按鈕顯示

(2),鼠標離開，左右箭頭隱藏

2,動態生成小圓點

(1)獲取所有圖片

(2)循環

(1),創建新的li

(2),把li添加到ol中

(3),給新的li設置索引號(自定義屬性)

(4),給新的li注冊點擊事件

3,單擊小圓點，小圓點呈現選中白色，移動圖片

(1),排他樣式

(1),去掉所有li的白色樣式

(2),留下當前li(第一個默認為白色的小圓點)

(2),移動ul

(1),獲取索引號(自定義屬性的值)

(2),計算ul的移動位置(-索引號*圖片的寬)

(3),使用動畫函數，移動ul

4,單擊右箭頭，切換下一張圖片

(1),切換下一張圖片

(2),小圓點跟著變化

(3),無縫切換

(1),核心原理：復制了一個圖片，放到ul的最后

(2),如果當前是最后一張，則瞬間回到第1張圖片。

5,單擊左箭頭，切換上一張圖片

6,自動輪播

(1),每隔2秒鐘，觸發右箭頭的點擊事件

7,(7)節流閥，避免狂點右箭頭

(1),定義一個全局變量(開關變量)

(2),把要鎖住的代碼放到if判斷中

(3),if判斷中，先鎖開關。flag = false

(4),animate的回調函數中，打開開關。flag = true

js代碼

如果說需要那些公共樣式或者哪里看不懂的地方的可以私聊我，我能幫你解答的一定幫你，希望可以一起進步，一起努力。

原作者：Grocery store owner

原出處：CSDN

總結

以上是生活随笔為你收集整理的js轮播图片小圆点变化_原生js实现轮播图(两种方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。