javascript 上下banner替换

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34184561

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/baikaishui/archive/2012/03/05/2380142.html

本文介绍了一种使用JavaScript实现的上下Banner自动切换效果，包括Banner的高度调整、定时器的应用及条件判断，使得Banner能够在指定高度下自动隐藏并显示另一个Banner。

javascript 上下banner替换

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

</script>
<script type="text/javascript">
var x=400;
function dianji(){
   document.getElementById('yincang').style.height=x+'px';
   x--;
    var time=setTimeout('dianji()',10);
   if(x==200){
   clearTimeout(time);
   //document.body.bgColor='red';
   document.getElementById('yincang').style.display='none';
   document.getElementById('xianshi').style.display='block';

   }
   }
</script>
<script type="text/javascript">

</script>
<style type="text/css">{ display:block}</style>
</head>

<body onload="dianji()" >

<div id="yincang" style=" background:#CCC; height:400px;"></div>
<div id="xianshi" style="background:#0F0; height:200px; display:none;">fdafda</div>
<div style="background:#666; height:2000px;"></div>

</body>
</html>