<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  language="javascript"  type="text/javascript" src="../js/image.js"> </script>
</head><body onload="startRotate();"> <form>
<h2> 图片定时播放</h2>
<img id="img1" style="width: auto;" src="../img/aaa.jpg" onmouseover="stopRotate();" onmouseout="startRotate()" />


</form></body>
</html>//图片定义数组  
var imageArray = ["aaa.jpg","bbb.jpg","ccc.jpg" ];
//image  indexe
var imageIndex = 1;
//定时对象
var imageTimer;
//启动图片变换
function startRotate(){
var rotateFunc = function () {
//获取图片img属性
var image = document.getElementById("img1");
//修改img1元素的是如此属性  然后修改imageIndex的值 便于下一次显示图片
image.src = "images/" + imageArray[imageIndex];
if(imageIndex == imageArray.length - 1)
           imageIndex = 0; 
else
imageIndex++;  
};
     
imageTimer = window.setInterval(rotateFunc,300);
}
//stop image
function stopRotate () {
window.clearInterval(imageTimer);


}