问题:创建一段带有幻灯片效果的JavaScript代码,要包含一个有4幅图片,设置定时器,每隔5秒切换一次图片,如果用户单击开始按钮,定时器启动,并开始进行图片切换,如果用户单击停止按钮,则停止定时器。
代码:
<body>
<div id="box"><img src="./img/1.jpg" alt=""></div>
<div id="btdiv">
<button>开始</button>
<button>停止</button>
</div>
<script>
var img = document.querySelector('#box img');
var btns = document.querySelectorAll('button');
console.log(box, btns);
// 图片切换函数
var index = 1;
var timer = null;
function text() {
index++;
if (index == 6) {
index = 1;
}
img.src = `./img/${index}.jpg`
}
btns[0].onclick = function () {
// text();
clearInterval(timer);
timer = setInterval(text, 1000);
}
btns[1].onclick = function () {
clearInterval(timer);
}
</script>
</body>