JavaScript使用定时器切换图片练习

定时

效果：可以根据按钮来控制图片的开始切换和停止切换

html代码：

<img id="img1" src="img/1.png" alt=""> <br> <br> <button id="btn1">开始</button> <button id="btn2">停止</button>

js代码：

window.onload = function(){ var img1 = document.getElementById("img1"); var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); //创建一个保存路径的数组 var arrstr = ["img/1.png", "img/2.jpg", "img/3.png", "img/4.jpg", "img/5.png"]; var index = 0; var timer1 btn1.onclick = function(){ //开启定时器之前 先把前面开的定时器关闭，可以防止点击多次按钮，同时开启很多定时器，使速度加快 clearInterval(timer1); //开启定时器来自动切换图片 timer1 = setInterval(function(){ index++; // if(index >= arrstr.length){ // index = 0; // } index = index % arrstr.length; img1.src = arrstr[index]; },500); }; btn2.onclick = function(){ clearInterval(timer1); }; };

延时

延时调用函数，只执行一次 var delayTimer = setTimeout(function(){},2000); 关闭延时调用 clearTimeout(delayTimer);