视频链接：
链接
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#img1{
width: 500px;
height: 300px;
}
</style>
<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"];
//创建一个变量保存索引
var index=0;
//为按钮绑定一单击响应函数
var timer;
var btn01=document.getElementById("btn");
btn01.onclick=function(){
/**
* 目前 我们每点击一个按钮就开一个定时器
* 点击多个按钮就开启多个定时器，这就导致图片切换速度过快
* 并且只能关闭最后一次关闭的定时器
* 根本停不下来
*/
/**
* 在开启定时器之前 应该关掉上一个定时器
*/
clearInterval(timer);
timer=setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
// if(index>=imgArr.length){
// index=0;
// }
//或者这么写
index = index % imgArr.length;
//修改img1的src属性
img1.src=imgArr[index];
},1000);
}
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
/**
* clearInterval()可以接受任意参数
* 如果参数是一个有效的定时器标识，则停止对应的定时器
* 如果参数不是一个有效的定时器，则什么也不做
*/
clearInterval(timer);
}
}
</script>
</head>
<body>
<img src="./img/1.jpg" id="img1"/>
<br />
<br />
<button id="btn">开始</button>
<button id="btn02">停止</button>
</body>
</html>