php 实现setinterval,js如何利用setInterval定时器方法实现轮播图 （完整代码）

本篇文章给大家带来的内容是关于js如何利用setInterval定时器方法实现轮播图 (完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

以前去面试的面试的时候 ，面试官直接叫我手写一个轮播图，那是刚出来，所以js也不厉害，所以直接说不会写，如果想要高薪js还是要会，平时无聊就学一下也行的，现在利用setInterval定时器方法开发 一个原生的轮播图；

代码如下：

Title

*{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}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

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[i].className = '';

}

oLi[count-1].className = "orange";

count++;

if (count>8){

count=1;

}

},1000)

示例图：

相关推荐：