轮播广告
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播广告</title>
<style type="text/css">
.hide{
display: none;
}
#div1{
position: absolute;
top:50px;
left:100px;
}
#div2{
position: absolute;
top:155px;
left:435px;
}
a{
display:block;
float: left;
width:15px;
height: 15px;
text-decoration: none;
background-color: #fff;
color:#000;
margin-right: 3px;
text-align: center;
border: 1px solid #999;
font-size:12px;
}
</style>
<script type="text/javascript">
var max=4;
var now=1;
var timer;
window.onload=show;
function show(id){
if(Number(id)){
now=id;
clearTimeout(timer);//清除原来的计时器
}
for(var i=1;i<=max;i++){
if(i==now){
document.getElementById("adv"+now).style.display="block"; //显示当前图片
}else{
document.getElementById("adv"+i).style.display="none";
}
}
if(now==max){
now=1;
}else{
now++;
}
timer=setTimeout("show()",2000); //创建计时器，两秒钟执行
}
</script>
</head>
<body>
<div id="div1">
<img src="images/class1-1.jpg" id="adv1" />
<img src="images/class1-2.jpg" id="adv2" class="hide"/>
<img src="images/class1-3.jpg" id="adv3" class="hide"/>
<img src="images/class1-4.jpg" id="adv4" class="hide"/>
</div>
<div id="div2">
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</body>
</html>时间： 2024-08-02 06:17:03