用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前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

果圖

思路分析：

1、開啟一個定時器

方法名：window.setInterval(code,MilliSec)，每隔指定的時間就執行code，無限次執行。

2、定時器函數主要是用來執行圖片輪播的效果

3、當鼠標放在圖片上面時，圖片就停止了輪播的效果清除了定時器

方法名：window.clearInterval (timer），清除指定的定時器。

　4、當鼠標離開圖片上面時，圖片繼續在執行輪播的效果重新開啟了定時器功能

5、當鼠標放在li標簽上面時，圖片就停止了輪播的效果清除了定時器

6、當鼠標放在li標簽上面時，還會顯示li標簽上面對應的數字的圖片

7、當鼠標離開li標簽上面時，圖片就會繼續開始輪播的效果重新開啟了定時器功能

8、li標簽上面的高亮效果，它是隨著圖片滾動而滾動。

HTML代碼

<body>
<div id="content">
<!--輪換顯示的橫幅廣告圖片-->
<div class="scroll_top"></div>
<div class="scroll_mid">
<img src="images/dd_scroll_1.jpg" alt="輪換顯示的圖片廣告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>
<div id="scroll_number">
<ul>
<li class="scroll_number_over" οnmοuseοver="stopScroll(1)" οnmοuseοut="goon()">1</li>
<li οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>
<li οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>
<li οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>
<li οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>
<li οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
</body>

JS代碼

<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById('scroll_number');
scrLi=scroll_number.getElementsByTagName('li');
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i<scrLiLen;i++){
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById('dd_scroll');
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval('imgScroll()',500);
}
</script>

以上就是輪播圖怎么做的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

在線咨詢

上一篇：使用JavaScript寫爬蟲
下一篇：HTML5之應用緩存

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求

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