您的位置：首页 > 其它

如何制作图片轮换显示？

2009-09-05 15:16 246 查看
<!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>
<script type="text/javascript" language="javascript">
var nowImg=1;
var maxImg=4;
function show(){
for(var i=1;i<=4;i++){
if(i==nowImg){
document.getElementById("img"+i).style.display="";//当前图片显示；
}else{
document.getElementById("img"+i).style.display="none";//其他图片隐藏；
}
}
if(i==maxImg){//定义下一张显示的图片;
i=1;
}else{
nowImg++;
}
time=setTimeout("show()",3000);//设置定时器，开始显示下一张图片
}
</script>
</head>
<body onload="show()">
<div style="top:200px;left:250px;position:absolute">
<img style="display:none" src="../image/ad-01.jpg" id="img1"/>
<img style="display:none" src="../image/ad-02.jpg" id="img2"/>
<img style="display:none" src="../image/ad-03.jpg" id="img3" />
<img style="display:none" src="../image/ad-04.jpg" id="img4" />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航