Home > Article > Web Front-end > How does js use the setInterval timer method to implement a carousel chart (complete code)
The content of this article is about how js uses the setInterval timer method to implement carousel images (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
When I went for an interview before, the interviewer asked me to write a carousel by hand. It had just come out, so js was not very good, so I just said that I couldn’t write it. If I wanted a high salary, I still had to use js. Yes, you can just learn it when you are bored. Now use the setInterval timer method to develop a native carousel image;
The code is as follows:
<!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>Sample image:
Related recommendations:
Implementation and usage of unordered image preloading in jquery
The above is the detailed content of How does js use the setInterval timer method to implement a carousel chart (complete code). For more information, please follow other related articles on the PHP Chinese website!
