<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
width: 300px;
padding: 20px;
margin: 10px auto;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<p id="info"></p>
<img src="img/1.jpg"/>
</div>
<button id="start">開始/暫停</button>
</body>
<script type="text/javascript">
//創建一個數組來保存圖片路徑，切換圖片就是切換圖片路徑
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
//獲取img元素，
var img=document.getElementsByTagName("img")[0];
//alert(img);
//創建保存圖片路徑的索引(數組下標)
var index=0;
//-開啟定時器來自動切換圖片
var timer;
var count=0;
//設置一下開始/暫停
document.getElementById("start").onclick=function(){
count++;
if(count%2!=0){
timer=setInterval(function(){
index++;
// if(index>imgArr.length-1){
// index=0;
// }
index=index % imgArr.length;//同上面的if判斷 0%4=4 1%4=1 ...4%4=0
//換圖
img.src=imgArr[index];
},1500);
}else{
clearInterval(timer);
}
}
</script>
</html>
