关闭

JavaScript【图片轮播】

462人阅读 评论(0) 收藏 举报
分类:

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

JavaScript代码:

  1. <script type="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<btns.length;i++){  
  32.     btns[i].onmouseout = btnMouseOut;  
  33.    }  
  34. }  
  35. </script>  
HTML代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  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>  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:40917次
    • 积分:705
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条