黑马程序员技术交流社区
标题:
图片轮播
[打印本页]
作者:
迦南
时间:
2014-9-20 22:04
标题:
图片轮播
<!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=gb2312" />
<title>无标题文档</title>
</head>
<style>img{display:none;}
.btn{border:1px solid black;width:30px;height:30px;display:inline;margin-right:5px;}
</style>
<script type="text/javascript">
var index=1;//当前显示的图片索引(1-5)
var timer;
function switchImg(){
// 当前这一张隐藏
document.getElementById("img"+index).style.display="none";
// 如果当前显示的图片索引没有到最大值就继续增加
if(index<5){index++;}
// 否则从第一个图片开始显示，索引从0开始
else{index=1;}
// 显示第index张
document.getElementById("img"+index).style.display="block";
// 下一秒,再执行本方法
timer = window.setTimeout("switchImg()",10000);
}
</script>
<body onload="switchImg()">
<!--放五张图,构造一个ImageList-->
<div style="border:0px solid black;width:300px;height:100px;">
<img id="img1" src="images/1.jpg">
<img id="img2" src="images/2.gif">
<img id="img3" src="images/photo_03.jpg">
<img id="img4" src="images/photo_04.jpg">
<img id="img5" src="images/photo_05.jpg">
</div>
<div id="btn1" onclick="manuImg()"></div>
<div id="btn2"></div>
<div id="btn3"></div>
<div id="btn4"></div>
<div id="btn5"></div>
</body>
</html>
作者:
15579171087
时间:
2014-9-20 22:30
额JS。。。。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2