JavaScript【图片轮播】

转自:http://blog.csdn.net/wjr_loves/article/details/7865537

JavaScript代码:

  1. "text/javascript">  
  2. var arr= new Array;  
  3. arr[0] = "image/a.jpg";  
  4. arr[1] = "image/b.jpg";  
  5. arr[2] = "image/c.jpg";  
  6. arr[3] = "image/d.jpg";  
  7. arr[4] = "image/f.jpg";  
  8. var Timer = setInterval(play,1000);  
  9. var count=1;  
  10. function play(){  
  11.    if(arr.length==count)  
  12.     count=0;  
  13.    document.getElementById("pic").src=arr[count];  
  14.    count++;  
  15. }  
  16. function clearTimer(){  
  17.    clearInterval(Timer);  
  18. }  
  19.   
  20. function onMouseOver(obj){  
  21.    clearTimer();  
  22.    var index=parseInt(obj.value);  
  23.    document.getElementById("pic").src=arr[index-1];  
  24.    count=index;  
  25. }  
  26. function btnMouseOut(){  
  27.    Timer = setInterval(play,1000);  
  28. }  
  29. function init(){  
  30.    var btns = document.getElementsByTagName("input");  
  31.    for(var i = 0; i
  32.     btns[i].onmouseout = btnMouseOut;  
  33.    }  
  34. }  
  35.   
HTML代码:
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档title>  
  6. head>  
  7. <body onload="init()">  
  8. <img id="pic" src="image/a.jpg" width="600" height="450" /><br />  
  9. <input type="button" value="1" id="1" onmouseover="onMouseOver(this)"/>  
  10. <input type="button" value="2" id="2" onmouseover="onMouseOver(this)" />  
  11. <input type="button" value="3" id="3" onmouseover="onMouseOver(this)" />  
  12. <input type="button" value="4" id="4" onmouseover="onMouseOver(this)" />  
  13. <input type="button" value="5" id="5" onmouseover="onMouseOver(this)" />  
  14. body>  
  15. html>  

你可能感兴趣的:(web,转载)