怎么用HTML和js實現(xiàn)輪播圖-創(chuàng)新互聯(lián)

這篇文章主要介紹“怎么用HTML和js實現(xiàn)輪播圖”，在日常操作中，相信很多人在怎么用HTML和js實現(xiàn)輪播圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用HTML和js實現(xiàn)輪播圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據中心構建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)成都移動機房報價，主機托管價格性價比高，為金融證券行業(yè)服務器托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

思路分析：

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>

到此，關于“怎么用HTML和js實現(xiàn)輪播圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當前文章：怎么用HTML和js實現(xiàn)輪播圖-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article38/dpeopp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、軟件開發(fā)、網站營銷、品牌網站制作、小程序開發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網站托管運營