setInterval()方法:每隔一段事件執(zhí)行一次函數(shù)
--參數(shù):1、回調(diào)函數(shù)
????????????? 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");
//創(chuàng)建一個數(shù)組存儲圖片的路徑
var imgArr = ["img/1.png","img/2.png","img/3.png","img/4.png"];
//index來圖片改變路徑
var index = 0;
//定義一個識別定時器的變量
var timer;
btn01.onclick = function(){
/**
* 一點擊開始按鈕,開啟一個定時器 每隔1000毫秒切換圖片
* 此時,我們每點擊一次按鈕 就會開啟一個定時器,
* 點擊多次開啟 會導致圖片切換速度過快
*/
//因此,在開啟定時器之前需要將上一個定時器關(guān)閉
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>