js如何利用setInterval定時器方法實作輪播圖 （完整程式碼）
- 不言原創
- 2018-08-13 16:08:368065瀏覽
這篇文章帶給大家的內容是關於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 = '';
}
oLi[count-1].className = "orange";
count++;
if (count>8){
count=1;
}
},1000)
</script>
</body>
</html>範例圖：
#相關推薦：
js陣列去重的方法有哪些？ js陣列去重五種方法總結（附程式碼）
##以上是js如何利用setInterval定時器方法實作輪播圖 （完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js實作頁間資料傳遞的程式碼下一篇：js實作頁間資料傳遞的程式碼