js自动小轮播

时间:2023-03-08 17:38:02
js自动小轮播

使用定时器,换个图片地址。

从1到5换,如果大于5了再跳到1,点击停止时关闭定时器。

<!--
Author: XiaoWen
Create a file: 2016-12-08 13:19:25
Last modified: 2016-12-08 13:39:27
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动小轮播</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}
ul,li,img{
width: 300px;
height: 200px;
line-height:200px;
overflow: hidden;
background:#ccc;
text-align:center;
}
</style>
</head>
<body>
<input type="button" value="轮播">
<input type="button" value="停止">
<ul>
<li><img src="" alt="1.jpg"></li>
</ul>
<script>
var a_ipt=document.getElementsByTagName("input");
var img=document.getElementsByTagName("img")[0];
var tim; //定时器
var i=1; //图片名
a_ipt[0].onclick=function(){
tim=setInterval(function(){
img.alt=i+1+".jpg"; //当然是从下一张开始播
i++;
if(i%5==0){ //超过5张从第一张开始
i=0;
}
},100)
}
a_ipt[1].onclick=function(){
clearInterval(tim);
}
</script>
</body>
</html>