<!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>
<style type="text/css">
<!--
img {
position:absolute;
width:350px;
height:263px;
z-index:2;
left:100px;
top: 13px;
}
-->
</style>
<script type="text/javascript">
var NowFrame = 1; //设置显示的第一个图片
var MaxFrame = 4; //设置显示图片的个数
function show(){
for(var i=1;i<=MaxFrame;i++){
if(NowFrame==i)
document.getElementById("adv"+NowFrame).style.display='block'; //当前显示图片
else
document.getElementById("adv"+i).style.display='none';
}
if(NowFrame == MaxFrame){ //判断当前图片是否是最后一个,如果是则从第一个重新轮回显示
NowFrame = 1;
}else{
NowFrame++;//设置下一个显示的图片
}
}
setInterval('show()', 1000); //设置定时器,显示下一个图片
</script>
</head>
<body οnlοad="show()">
<img id="adv1" style="display: none;" src="images/1.jpg">
<img id="adv2" style="display: block;" src="images/2.jpg">
<img id="adv3" style="display: none;" src="images/3.jpg">
<img id="adv4" style="display: none;" src="images/4.jpg">
</body>
</html>
javascript实现图片轮换效果
最新推荐文章于 2019-09-04 09:30:00 发布