java用定时器切换图片_JS切换图片(使用了定时器setInterval()方法)

代码如下：

window.onload = function(){

var btn01 = document.getElementById("btn01");

//获取img对象

var img1 = document.getElementById("img1");

//创建一个数组存储图片的路径

var imgArr = ["img/1.png","img/2.png","img/3.png","img/4.png"];

//index来图片改变路径

var index = 0;

//定义一个识别定时器的变量

var timer;

btn01.onclick = function(){

/**

* 一点击开始按钮，开启一个定时器 每隔1000毫秒切换图片

* 此时，我们每点击一次按钮 就会开启一个定时器，

* 点击多次开启 会导致图片切换速度过快

*/

//因此，在开启定时器之前需要将上一个定时器关闭

clearInterval(timer);

timer = setInterval(function(){

index++;

index = index % imgArr.length;

img1.src = imgArr[index];

},1000);

};

/**

* 点击停止按钮时，取出定时器

*/

btn02.onclick = function(){

clearInterval(timer);

}

};

开始

停止