问题:创建一段带有幻灯片效果的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>