setInterval()方法:每隔一段事件执行一次函数
--参数:1、回调函数
2、间隔时间,毫秒为单位
例子:每隔1秒打印一次hello
setInterval(function(){
alert("hello");
},1000);
图片切换效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
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);
}
};
</script>
</head>
<body>
<img src="img/1.png" id="img1" height="300px" width="300px">
<br /><br>
<button type="button" id="btn01">开始</button>
<button type="button" id="btn02">停止</button>
</body>
</html>