转自：http://blog.csdn.net/wjr_loves/article/details/7865537
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>