<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#img1{
400px;
height: 400px;
}
</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;
// 为btn01绑定一个单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
/*
目前，我们每点击一次按钮，就会开启一个定时
点击多次就会开启多个定时器，这就导致图片的切换速度过快，
并且我们只能关闭最后一次开启的定时器
*/
// 在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
/*
开启一个定时器，来自动切换图片
*/
timer=setInterval(function () {
// 使索引自增
index++;
// 判断索引是否超过最大索引
/* if(index>=imgArr.length){
// 则将index设置为0
index=0;
} */
index %= imgArr.length;
// 修改img1的src属性
img1.src = imgArr[index];
}, 1000);
};
// 为btn02绑定一个单击响应函数
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
// 点击按钮以后，停止图片的自动切换，关闭定时器
/*
clearInterval()可以接收任意参数，
如果参数是一个有效的定时器的标识，则停止对应的定时器
如果参数不是一个有效的标识，则什么也不做
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="./img/1.jpg" />
<br/></br>
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
点击开始，开始切换图片，点击停止，停止图片切换