JavaScript【图片轮播】

最新推荐文章于 2025-05-13 09:36:12 发布

转载最新推荐文章于 2025-05-13 09:36:12 发布 · 897 阅读

转载同时被 2 个专栏收录

12 篇文章

订阅专栏

web

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单图片轮播效果，并通过按钮鼠标悬停事件来控制图片的显示。该示例展示了如何利用JavaScript定时器、DOM操作等技术实现网页中的动态效果。

转自：http://blog.youkuaiyun.com/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>  
 