寫在前面：
在頁面每隔一段時間實現一個動態功能時可以使用定時器，setTimeout()和setInterval()方法
註意事項：
1.定時器有返回值，返回的是定時器的編號 2.多次調用定時器可以產生多個定時器，產生的頁面效果是循環的功能越來越快 3.清除定時器方法clearTimeout()和clearInterval()隻能清楚對應定時器產生的最後一個編號（如果多次調用之後使用清除定時器方法隻能清除最後一個定時器， 之前的定時器仍然可以繼續運行。所以需要提前調用一次清除器，防止重復調用產生定時器。）
主要代碼：
<body>
<button id="btn-start">Start</button><button id="btn-stop">Stop</button><br>
<img src="images/1.png" alt="" id="pic">
<script type="text/javascript">
/*
頁面上有兩個按鈕 “開始” “停止”，一個圖片
1.當點擊“開始”按鈕時，圖片每個兩秒切換一次（共有四張圖片，循環切換）
2.點擊停止時，停止切換
*/
var btn1=document.getElementById('btn-start');
var btn2=document.getElementById('btn-stop');
var pic=document.getElementById('pic');
var index=1;//圖片名稱編號 默認顯示第一張
var timer;
//開始
btn1.onclick=function(){
clearInterval(timer);//清除上一個定時器
timer=setInterval(function(){
index++;
//最後一張
if(index==5){
index=1;
}
pic.src='images/'+index+'.png';
},1000);
};
//結束
btn2.onclick=function(){
clearInterval(timer);
};
</body>
寫在最後：
當兩個函數需要同一個變量時需要提前定義為全局變量，如果隻在一個函數中未聲明直接賦值然後利用系統提升為全局變量的話容易出錯，不建議使用。
