w3school的解释:
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
实现图片切换:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<script type="text/javascript">
window.onload=function(){
//获取img标签
var img1=document.getElementById("img1");
//创建一个索引,用来保存图片的路径
var imgArr=["img/1.jpg","img/2.JPG","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
//创建一个变量,用来保存当前图片的索引
var index=0;
//定义一个变量,用来保存定时器的标识
var timer;
//获取按钮
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
/*
* 开启一个定时器
*/
/*
* 关闭之前开启的定时器,防止多次点击,持续开启定时器
*/
clearInterval(timer);
timer=setInterval(function(){
/*
* 使索引自增
*/
index++;
if(index>=imgArr.length){
index=0;
};
//修改img1的src属性
img1.src=imgArr[index];
},1000);
};
//获取btn02按钮
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" style="width: 200px;"/>
<br />
<br />
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
</body>
</html>
效果图:
点击开始,定时器启动,自动切换,点击暂停,图片停止切换