1.实现功能,点击开始时每隔500ms自动切图,点击停止时,停止切图
2.代码短如下
<style>
div.box {
width: 500px;
margin: 50px auto;
text-align: center;
background-color: bisque;
}
img {
width: 100%;
}
</style>
<script>
window.onload = function () {
/*
使图片可以自动切换
*/
// 获取图片标签
let img = document.getElementById("img");
// 封装图片src路径
arrAll = ["./th (1).jpg", "./th.jpg", "./th2.jpg"];
let btn = document.getElementById("btn");
let btn1 = document.getElementById("btn1");
// 让图片自动切换路径
let i = 1;
/*
声明一个变量用于保存标识。
注意:在btn单击响应事件外申明,若在点击响应函数内声明则无法保留上一次计时器的timer值,
导致每次点击开始时开头的clearInterval将会失效。
*/
let timer;
btn.onclick = function () {
/*
每点一次定时器便会激活一次定时器
点击多次就会开启多个定时器,导致图片切换速度过快,
并且我们只能关闭最后一次开启的定时器
*/
// 在开启定时器之前需要将上一个定时器关闭
clearInterval(timer);
timer = setInterval(function () {
img.src = arrAll[i];
i++;
// 设置循环
// if (i == arrAll.length) {
// i = 0;
// }
i = i % arrAll.length;//索引号i自增小于长度则返回原值,当索引号i自增等于长度时,初始化i=0。
// 设置单击停止事件
btn1.onclick = function () {
clearInterval(timer);
}
}, 500);
}
}
</script>
</head>
<body>
<div class="box">
<p id="info"></p>
<img id="img" src="./th (1).jpg" alt="">
<br>
<button id="btn">开始</button> <button id="btn1">停止</button>
</div>
</body>
3.主要需解决问题
多次点击开始时,出现切图速度倍增。
4.思维导图