首页 > 代码库 > 最简单的图片轮播
最简单的图片轮播
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var arr = new Array;
arr[0] = "../images/slide-01.jpg";
arr[1] = "../images/slide-02.jpg";
arr[2] = "../images/slide-03.jpg";
var Timer = setInterval(play, 1000);
var count = 1;
function play() {
if (arr.length == count)
count = 0;
document.getElementById("pic").src = http://www.mamicode.com/arr[count];
count++;
}
function clearTimer() {
clearInterval(Timer);
}
function onm ouseOver(obj) {
clearTimer();
var index = parseInt(obj.value);
document.getElementById("pic").src = http://www.mamicode.com/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>
</head>
<body onl oad="init()">
<img id="pic" src="http://www.mamicode.com/images/slide-01.jpg" width="600" height="315" /><br />
<input type="button" value="http://www.mamicode.com/1" id="1" onm ouseover="onMouseOver(this)"/>
<input type="button" value="http://www.mamicode.com/2" id="2" onm ouseover="onMouseOver(this)" />
<input type="button" value="http://www.mamicode.com/3" id="3" onm ouseover="onMouseOver(this)" />
</body>
</html>
转载原文：http://blog.csdn.net/wjr_loves/article/details/7865537
最简单的图片轮播