js 定时器setInterval

时间:2024-10-28 08:21:28
//获取img标签 var img1 = document.getElementById("img1"); //创建一个数组来保存图片的路径 var imgArr = ["img/", "img/", "img/", "img/", "img/"]; //创建一个变量,用来保存当前图片的索引 var index = 0; //定义一个变量,用来保存定时器的标识 var timer; //为btn01绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function() { /* * 目前,我们每点击一次按钮,就会开启一个定时器, * 点击多次就会开启多个定时器,这就导致图片的切换速度过快, * 并且我们只能关闭最后一次开启的定时器 */ //在开启定时器之前,需要将当前元素上的其他定时器关闭 clearInterval(timer); /* * 开启一个定时器,来自动切换图片 */ timer = setInterval(function() { //使索引自增 index++; //判断索引是否超过最大索引 /*if(index >= ){ //则将index设置为0 index = 0; }*/ index %= imgArr.length; //修改img1的src属性 img1.src = imgArr[index]; }, 1000); }; //为btn02绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function() { //点击按钮以后,停止图片的自动切换,关闭定时器 /* * clearInterval()可以接收任意参数, * 如果参数是一个有效的定时器的标识,则停止对应的定时器 * 如果参数不是一个有效的标识,则什么也不做 */ clearInterval(timer); };