JS实现主页广告隐藏显示

最新推荐文章于 2024-04-22 16:51:33 发布

小幸运0826

最新推荐文章于 2024-04-22 16:51:33 发布

阅读量1.7k

点赞数

分类专栏： java web（my code）

本文链接：https://blog.csdn.net/wh1132633619/article/details/78067362

版权

java web（my code）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品主页</title>
<style>
#bigdiv {
	border: 1px solid blue;
	width: 90% px;
}

.logodiv {
	border: 1px solid blue;
	width: 33%;
	float: left;
	height: 57px;
}

.shangpindiv1 {
	border: 1px solid blue;
	width: 25%;
	float: left;
}

.shangpindiv2 {
	border: 1px solid blue;
	width: 73%;
	float: left;
	height: 235px;
}

.shangpindiv3 {
	border: 1px solid blue;
	width: 24%;
	float: left;
	height: 235px;
}

.clear {
	clear: both;
}
</style>
<script>
	var time;
	window.onload = function() {
		window.setInterval("change()", 1000);
		//time = window.setInterval("show()", 2000);
		window.setTimeout("show()", 2000);
	}
	var i = 2;
	function change() {
		var image2 = document.getElementById("image2");
		if (i == 7) {
			i = 2;
		} else {
			i = i + 5;
		}
		image2.src = "image/" + i + ".png";
	}
	function show() {
		var ad = document.getElementById("ad");
		ad.style.display = "block";
		//window.clearInterval(time);
		//time = window.setInterval("hidden()", 2000);
		window.setTimeout("hidden()", 2000);
	}
	function hidden() {
		var ad = document.getElementById("ad");
		ad.style.display = "none";
		//window.clearInterval(time);
	}
</script>
</head>
<body>
	<div id=bigdiv>
		<div style="width: 100%">
			<img src="image/ad.png " id="ad" width="20%">
		</div>
		<div>
			<div class="logodiv">
				<img src="image/0.png" height="57" />
			</div>
			<div class="logodiv">
				<img src="image/1.png" width="100%" />
			</div>
			<div
				style="width: 33%; height: 42px; float: left; padding-top: 15px;">
				<a href="#">登陆</a>  <a href="注册.html">注册</a>  <a href="#">购物车</a>
			</div>
			<div class="clear"></div>
		</div>
		<div>
			<div class="shangpindiv1">
				<img src="image/2.png" width="100%" id=image2>
			</div>
			<div style="border: 1px solid blue; width: 74%; float: left;">
				<div>
					<div class="shangpindiv2">
						<img src="image/3.png" width="100%" height="100%">
					</div>
					<div class="shangpindiv3">
						<img src="image/4.png" width="100%">
					</div>
					<div class="shangpindiv3">
						<img src="image/4.png" width="100%">
					</div>
				</div>
				<div>
					<div class="shangpindiv3">
						<img src="image/4.png" width="100%">
					</div>
					<div class="shangpindiv3">
						<img src="image/4.png" width="100%">
					</div>
					<div class="shangpindiv3">
						<img src="image/4.png" width="100%">
					</div>
					<div class="clear"></div>

				</div>
			</div>
		</div>
		<div style="width: 100%; border: 1px solid blue;">
			<img src="image/5.png" width="100%">
		</div>
		<div style="width: 100%; border: 1px solid blue;">
			<center>
				<a href="">关于我们  </a> <a href="">联系我们 </a> <a href="">招贤纳士</a><a
					href=""> 友情链接</a>
			</center>
		</div>
	</div>
</body>
</html>

小幸运0826

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现主页广告隐藏显示

商品主页#bigdiv { border: 1px solid blue; width: 90% px;}.logodiv { border: 1px solid blue; width: 33%; float: left; height: 57px;}.shangpindiv1 { border: 1px solid blue; width: 25%; floa
复制链接

扫一扫