整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
JavaScript實現(xiàn)無限輪播圖效果（附源碼）
javascript群內(nèi)每日課題-今日課題：用JavaScript實現(xiàn)無限輪播圖效果
PS:很多企業(yè)通用的案例自己再學習過程中肯定是要熟練的，所以今天做了這個無限輪播，很多人都擔心自己寫的代碼爛，而不敢去寫代碼，總想著等自己等寫出好的代碼再來做游戲，再來練習，其實我的意見是前端新人要多些爛代碼，不管你在學習中還是工作中，你不寫夠足量的爛代碼，是無法進化到寫好代碼的程度，所以練習吧騷年
如果想要更多的企業(yè)求職加分項目，案例，游戲源碼，可以來一下我的前端群216634437，每天都會精挑細選一個特效，項目游戲出來詳細講解，分享！
知識要點
1.實現(xiàn)無限循環(huán)的原理：
以偏移的距離來判斷是否跳回第一張和最后一張
也可以利用循環(huán)判斷圖片的當前索引值
2.當前圖片輪播的圓點變色顯示：
因為每次點擊index+1 所以當前的index-1就是button的索引
3.實現(xiàn)動畫滾動效果：
原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次調用go函數(shù)，一直到不滿足條件就停
4.點擊圓點按鈕執(zhí)行動畫：
原理獲取當前的按鈕位置再獲取要點擊的按鈕的位置
用（點擊的——當前的）*-600=需要跳轉的正負距離（向左或向右）
5.自動播放：
給外層容器加個onmouseover事件再調用setInterval方法
想要練習這個案例的進群領取源碼：216634437（代碼已經(jīng)上傳到群文件，自助下載練習）
頭條號里有許多web前端學習視頻，企業(yè)常用特效/案例/項目，敬請關注！
如果想看到更加系統(tǒng)的文章和學習方法經(jīng)驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻
果圖
思路分析：
1、開啟一個定時器
方法名：window.setInterval(code,MilliSec)，每隔指定的時間就執(zhí)行code，無限次執(zhí)行。
2、定時器函數(shù)主要是用來執(zhí)行圖片輪播的效果
3、當鼠標放在圖片上面時，圖片就停止了輪播的效果 清除了定時器
方法名：window.clearInterval (timer），清除指定的定時器。
4、當鼠標離開圖片上面時，圖片繼續(xù)在執(zhí)行輪播的效果 重新開啟了定時器功能
5、當鼠標放在li標簽上面時，圖片就停止了輪播的效果 清除了定時器
6、當鼠標放在li標簽上面時，還會顯示li標簽上面對應的數(shù)字的圖片
7、當鼠標離開li標簽上面時，圖片就會繼續(xù)開始輪播的效果 重新開啟了定時器功能
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>
以上就是輪播圖怎么做的詳細內(nèi)容，更多請關注其它相關文章！
更多技巧請《轉發(fā) + 關注》哦！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
