需求：根据一定的时间切换图片，类似轮播类操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //使图片可以自动切换 window.onload = function(){ img = document.getElementById("img1"); var timer var imgarr = ['../img/3.jpg','../img/logo.png'] btn = document.getElementById("btn"); btn1 = document.getElementById("btn1") btn.onclick = function(){ imgarr = ['../img/3.jpg','../img/logo.png'] var index = 0; timer = setInterval(function(){ /* * 目前我们点击一次按钮，就会开启一个定时器， * 点击多次就会开启多个定时器，这就导致图片的切换速度过快， * 并且我们只能关闭最后一次开启的定时器 * 所以在开启定时器之前，需要将当前元素上的其他定时器关闭。 * */ clearInterval(timer); index++; //求余循环 index %= imgarr.length console.log(imgarr[index]) img.src = imgarr[index] },1000); } btn1.onclick = function(){ /*clearInterval()可以接收任意参数 * 如果参数是一个有效的定时器的标识，则停止对应的定时器 * 如果参数不是一个有效的标识，则什么都不做，所以timer如果是null的话，也没有问题 * */ clearInterval(timer) } } </script> </head> <body> <img id="img1" src="../img/3.jpg"/><br /> <!--点击button再执行--> <button id="btn">开始</button> <button id="btn1">停止</button> </body> </html>