JS實現主頁廣告隱藏顯示

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章