JavaScript【图片轮播】

最新推荐文章于 2019-06-14 23:22:01 发布

原创最新推荐文章于 2019-06-14 23:22:01 发布 · 8.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #function #timer #xhtml #input

JavaScript/JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个自动轮播图片的系统，并通过鼠标悬停事件来控制轮播的停止与启动，实现图片的流畅自动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>