需求：將六張圖片循環播放。當鼠標移到圖片上方，圖片暫停。
代碼：
HTML：
<!DOCTYPE html>
<html>
<head>
<style>
#pics {
height: 218px;
width: 218px;
border: 3px solid #ddd;
}
.hide {
display: none;
}
.show {
display: inline-block;
}
</style>
<meta charset="utf-8"/>
<title>圖片輪播</title>
</head>
<body>
<div id="pics" οnmοuseοver="stop()" οnmοuseοut="change()">
<img src="images/01.jpg" class="show"/> <!--先將圖片全部隱藏。-->
<img src="images/02.jpg" class="hide"/>
<img src="images/03.jpg" class="hide"/>
<img src="images/04.jpg" class="hide"/>
<img src="images/05.jpg" class="hide"/>
<img src="images/06.jpg" class="hide"/>
</div>
</body>
<script type="text/javascript" src="change.js" ></script>
</html>var id;
var imgs = document.getElementsByTagName("img");
var index = 0;
function change(){ //輪播圖片
id = setInterval(function(){ //用定時器實現兩秒鐘換一張
index++;
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide";
}
var next = index%imgs.length; //當前腳標模除以圖片張數爲下一張圖片的腳標
imgs[next].className = "show"; //將將要顯示的圖片的class更換爲show
},2000);
}
function stop(){ //鼠標移出時的stop方法
clearInterval(id);
}
change();
