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

来源：动视网责编：小采时间：2020-11-27 19:32:26

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

js如何利用setInterval定时器方法实现轮播图（完整代码）:本篇文章给大家带来的内容是关于js如何利用setInterval定时器方法实现轮播图（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。以前去面试的面试的时候，面试官直接叫我手写一个轮播图，那是刚出来，所以js也不厉害，所以直接

推荐度：

点击下载本文 文档为doc格式

导读js如何利用setInterval定时器方法实现轮播图（完整代码）:本篇文章给大家带来的内容是关于js如何利用setInterval定时器方法实现轮播图（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。以前去面试的面试的时候，面试官直接叫我手写一个轮播图，那是刚出来，所以js也不厉害，所以直接

本篇文章给大家带来的内容是关于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如何利用setInterval定时器方法实现轮播图（完整代码）

推荐度：

点击下载本文 文档为doc格式

标签：方法定时实现

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐