您的位置：首页 > Web前端 > JavaScript

JavaScript图片轮播

2016-07-07 14:03 441 查看


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代码：

[html] view
plain copy

print?

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航