JavaScript代码:
<script type="text/javascript"> var arr= new Array; arr[0] = "image/a.jpg"; arr[1] = "image/b.jpg"; arr[2] = "image/c.jpg"; arr[3] = "image/d.jpg"; arr[4] = "image/f.jpg"; var Timer = setInterval(play,1000); var count=1; function play(){ if(arr.length==count) count=0; document.getElementById("pic").src=arr[count]; count++; } function clearTimer(){ clearInterval(Timer); } function onMouseOver(obj){ clearTimer(); var index=parseInt(obj.value); document.getElementById("pic").src=arr[index-1]; count=index; } function btnMouseOut(){ Timer = setInterval(play,1000); } function init(){ var btns = document.getElementsByTagName("input"); for(var i = 0; i<btns.length;i++){ btns[i].onmouseout = btnMouseOut; } } </script>
HTML代码:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body onload="init()"> <img id="pic" src="image/a.jpg" width="600" height="450" /><br /> <input type="button" value="1" id="1" onmouseover="onMouseOver(this)"/> <input type="button" value="2" id="2" onmouseover="onMouseOver(this)" /> <input type="button" value="3" id="3" onmouseover="onMouseOver(this)" /> <input type="button" value="4" id="4" onmouseover="onMouseOver(this)" /> <input type="button" value="5" id="5" onmouseover="onMouseOver(this)" /> </body> </html>