本篇文章给大家带来的内容是关于js如何利用setInterval定时器方法实现轮播图 (完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
以前去面试的面试的时候 ,面试官直接叫我手写一个轮播图,那是刚出来,所以js也不厉害,所以直接说不会写,如果想要高薪js还是要会,平时无聊就学一下也行的,现在利用setInterval定时器方法开发 一个原生的轮播图;
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!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数组去重五种方法总结(附代码)
jquery中图片无序预加载的实现以及使用方法
以上是js如何利用setInterval定时器方法实现轮播图 (完整代码)的详细内容。更多信息请关注PHP中文网其他相关文章!