怎么用HTML和js實(shí)現(xiàn)輪播圖

發(fā)布時(shí)間：2022-04-18 16:13:53 來源：億速云閱讀：440 作者：iii 欄目：開發(fā)技術(shù)

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

思路分析：

　　1、開啟一個(gè)定時(shí)器

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

　　2、定時(shí)器函數(shù)主要是用來執(zhí)行圖片輪播的效果

　　3、當(dāng)鼠標(biāo)放在圖片上面時(shí)，圖片就停止了輪播的效果清除了定時(shí)器

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

　　4、當(dāng)鼠標(biāo)離開圖片上面時(shí)，圖片繼續(xù)在執(zhí)行輪播的效果重新開啟了定時(shí)器功能

　　5、當(dāng)鼠標(biāo)放在li標(biāo)簽上面時(shí)，圖片就停止了輪播的效果清除了定時(shí)器

　　6、當(dāng)鼠標(biāo)放在li標(biāo)簽上面時(shí)，還會(huì)顯示li標(biāo)簽上面對(duì)應(yīng)的數(shù)字的圖片

　　7、當(dāng)鼠標(biāo)離開li標(biāo)簽上面時(shí)，圖片就會(huì)繼續(xù)開始輪播的效果重新開啟了定時(shí)器功能

　　8、li標(biāo)簽上面的高亮效果，它是隨著圖片滾動(dòng)而滾動(dòng)。

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>

到此，關(guān)于“怎么用HTML和js實(shí)現(xiàn)輪播圖”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

怎么用HTML和js實(shí)現(xiàn)輪播圖

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽