首頁 >web前端 >js教程 >輪播圖怎麼做

輪播圖怎麼做

angryTom原創: 2019-08-03 14:25:559320瀏覽

輪播圖怎麼做

效果圖

#思路分析：

　　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(&#39;scroll_number&#39;);
scrLi=scroll_number.getElementsByTagName(&#39;li&#39;);
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(&#39;dd_scroll&#39;);
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(&#39;imgScroll()&#39;,500);
}
</script>

以上是輪播圖怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html JS li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：fetch什麼意思下一篇：fetch什麼意思

看更多