JavaScript【图片轮播】

转载 2013年12月03日 15:10:05

转自: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>  

相关文章推荐

javascript图片轮播

  • 2016年08月15日 00:31
  • 1.82MB
  • 下载

javascript图片轮播特效

  • 2013年11月13日 10:49
  • 121KB
  • 下载

JavaScript定时器--图片轮播

效果: http://115.159.53.185/test/jsimagescroll/js: move() 利用定时器实现移动 //要让哪一个元素运动 //元素运动方向 //从哪里运动到哪里 ...

图片轮播,javascript

  • 2016年10月10日 22:38
  • 6.57MB
  • 下载

JavaScript 图片轮播

  • 2010年12月25日 21:03
  • 602KB
  • 下载

使用原生javascript和css实现图片轮播效果

图片轮播 #box { width:506px; h...
  • sofeien
  • sofeien
  • 2017年02月07日 13:50
  • 197

JavaScript 广告图片轮播 JS

  • 2008年04月24日 18:09
  • 99KB
  • 下载

javascript图片轮播

  • 2011年10月31日 15:15
  • 5.69MB
  • 下载

原生javascript图片轮播实现

初学javascript,尝试着制作动画-图片轮播。(实现方法挺多) 思路: 添加多张图片,依次让图片显示。...

超实用的JavaScript代码段 Item3 --图片轮播效果

图片轮播效果图片尺寸 统一设置成:490*170px;一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index二、添加定时器,每隔2秒钟in...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript【图片轮播】
举报原因:
原因补充:

(最多只允许输入30个字)