javascript实现图片轮换效果

来源：互联网发布：js的window对象编辑：程序博客网时间：2024/05/17 06:48

<!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">

</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 onload="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>