首頁  >  文章  >  web前端  >  js如何利用setInterval定時器方法實作輪播圖 (完整程式碼)

js如何利用setInterval定時器方法實作輪播圖 (完整程式碼)

不言
不言原創
2018-08-13 16:08:368055瀏覽

這篇文章帶給大家的內容是關於js如何利用setInterval定時器方法實現輪播圖(完整程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

以前去面試的面試的時候,面試官直接叫我手寫一個輪播圖,那是剛出來,所以js也不厲害,所以直接說不會寫,如果想要高薪js還是要會,平常無聊就學一下也行的,現在利用setInterval定時器方法開發一個原生的輪播圖;

程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #main{width:490px;margin:100px auto;}
        #main img{width:100%;height:300px}
        #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;
            padding:6px;
        }
        .orange{background-color: orange}
    </style>
</head>
<body>
<p id="main">
    <img src="img/1.jpg">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</p>
<script type="text/javascript">
    var op = document.getElementsByTagName("img")[0];
    var oLi = document.getElementsByTagName("li");
    var count =1;
    var timer = setInterval(function () {
        op.src = "img/"+count+".jpg";
        for ( var i=0;i<oLi.length;i++ ){
            oLi[i].className = &#39;&#39;;
        }
        oLi[count-1].className = "orange";
        count++;
        if (count>8){
            count=1;
        }
    },1000)
</script>
</body>
</html>

範例圖:

#相關推薦:

js陣列去重的方法有哪些? js陣列去重五種方法總結(附程式碼)

jquery中圖片無序預先載入的實作以及使用方法

##

以上是js如何利用setInterval定時器方法實作輪播圖 (完整程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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