setInterval()和clearInterval()方法练习
点击开始，可每秒自动切换一张图片，点击停止即可停止切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="img1" src="img/1.jpg" />
<br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
<script>
//创建一个数组保存图片路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]
//创建一个变量，保存当前图片索引
var index = 0;
//定义一个变量，保存定时器的标识
var timer;
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//目前，我们每点击一次按钮，就会开启一个定时器，点击多次就会开启多个定时器，
//这就导致图片的切换速度过快，并且我们只能关闭最后一次开启的定时器
//开启定时器之前关闭当前元素上的其他定时器
clearInterval(timer);
//开启一个定时器，自动切换图片
timer=setInterval(function() {
//索引自增
index++;
index %= imgArr.length;
//修改img1的src属性
img1.src = imgArr[index];
}, 1000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//点击按钮后，关闭定时器，停止图片的自动切换
//clearInterval()可以接收任意参数
//如果参数是一个有效的定时器的标识，则停止对应的定时器。如果参数不是一个有效的标识，则什么也不做
clearInterval(timer);
};
</script>
</html>
