<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>通过定时器实现图片的自动切换和关闭效果</title>
<style type="text/css">
#pic{
height:700px;
width:433px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var timer; //定义定时器变量
var arrImg=["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg"];
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var pic=document.getElementById("pic");
var index=0; //定义索引变量，用来遍历图片
btn01.onclick=function(){
clearInterval(timer); //清除可能存在的上一个定时器
timer=setInterval(function(){
++index;
index=index%arrImg.length;
pic.src=index + ".jpg";
},1000);
};
btn02.onclick=function(){ //停止定时器
clearInterval(timer);
};
};
</script>
</head>
<body>
<img src="0.jpg" id="pic"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>经过测试，点击“开始”按钮 开始自动切换图片，点击“停止”按钮 关闭该功能。实现效果如下所示：
