如何制作图片轮换显示？

最新推荐文章于 2017-07-28 15:55:36 发布

hngmduyi

最新推荐文章于 2017-07-28 15:55:36 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： xhtml javascript html function div

本文链接：https://blog.csdn.net/hngmduyi/article/details/4522593

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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 οnlοad="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>