另辟蹊径实现轮播图的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jquery网络引用地址 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title> 两个定时器实现轮播图</title>
</head>
<body>
<img id="app" src="./images/1.jpg" />
<br />
<button id="clear">停止轮播</button>
<button id="continue">继续轮播</button>
<button id="pre">上一张</button>
<button id="next">下一张</button>
<script>
//要遍历的图片路径数组
var images = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];
//获取图片对象
var image = document.getElementById("app");
//下标
var index = 0;
//定时器
var interval, timeOut = 0;
$(function () {
// 绑定清除两个定时器的方法
$("#clear").click(function () {
console.log('清除定时器');
window.clearInterval(interval);
window.clearTimeout(timeOut);
});
// 对两个定时器进行重新赋值
$("#continue").click(function () {
console.log('继续执行定时器');
interval = setInterval(function () {
timeOut = setTimeout(() => {
if (index > (images.length - 1)) {
index = 0;
}
image.src = images[index];
index++;
}, 1000);
}, 1500);
});
// 根据下标切换图片
$("#next").click(function () {
console.log('下一张')
index++;
if (index > (images.length - 1)) {
index = 0;
}
image.src = images[index];
});
// 根据下标切换图片
$("#pre").click(function () {
console.log('上一张')
index--;
if (index < 0) {
index = images.length - 1;
}
image.src = images[index];
});
// 默认执行主体
interval = setInterval(function () {
timeOut = setTimeout(() => {
if (index > (images.length - 1)) {
index = 0;
}
image.src = images[index];
index++;
}, 1000);
}, 1500);
});
</script>
</body>
</html>
项目结构：
