用JavaScript實現網頁無限輪播圖效果，附整套源碼

用JavaScript實現無限輪播圖效果（附源碼）

javascript群內每日課題-今日課題：用JavaScript實現無限輪播圖效果

PS:很多企業通用的案例自己再學習過程中肯定是要熟練的，所以今天做了這個無限輪播，很多人都擔心自己寫的代碼爛，而不敢去寫代碼，總想著等自己等寫出好的代碼再來做遊戲，再來練習，其實我的意見是前端新人要多些爛代碼，不管你在學習中還是工作中，你不寫夠足量的爛代碼，是無法進化到寫好代碼的程度，所以練習吧騷年

如果想要更多的企業求職加分項目，案例，遊戲源碼，可以來一下我的前端群216634437，每天都會精挑細選一個特效，項目遊戲出來詳細講解，分享！

知識要點

1.實現無限循環的原理：

以偏移的距離來判斷是否跳回第一張和最後一張

也可以利用循環判斷圖片的當前索引值

2.當前圖片輪播的圓點變色顯示：

因為每次點擊index+1 所以當前的index-1就是button的索引

3.實現動畫滾動效果：

原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px

就要用到setTimeout(go,10);//10毫秒再次調用go函數，一直到不滿足條件就停

4.點擊圓點按鈕執行動畫：

原理獲取當前的按鈕位置再獲取要點擊的按鈕的位置

用（點擊的——當前的）*-600=需要跳轉的正負距離（向左或向右）

5.自動播放：

給外層容器加個onmouseover事件再調用setInterval方法

想要練習這個案例的進群領取源碼：216634437（代碼已經上傳到群文件，自助下載練習）

頭條號裡有許多web前端學習視頻，企業常用特效/案例/項目，敬請關注！

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注後回覆‘給我資料’可以領取一套完整的學習視頻