您的位置：首页 > Web前端 > JavaScript

JS实现主页广告隐藏显示

2017-09-22 21:58 309 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航