溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用HTML和js實現輪播圖”，在日常操作中，相信很多人在怎么用HTML和js實現輪播圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用HTML和js實現輪播圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
思路分析：
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>到此，關于“怎么用HTML和js實現輪播圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
