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

jquery实现主页广告隐藏显示

2017-09-22 21:56 357 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页3</title>
<script src="js/jquery-3.2.1.js"></script>
<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;
$(function() {
time = setInterval("showad()", 1000);
});
function showad() {
//$("#ad").slideDown();
//$("#ad").show("slow");
$("#ad").fadeIn(3000);
clearInterval(time);
time = setInterval("hidead()", 1000);
}
function hidead() {
//$("#ad").slideUp("slow");
//$("#ad").hide("slow");
$("#ad").fadeOut(3000);
clearInterval(time);
}
</script>
</head>
<body>
<div id=bigdiv>
<div style="width: 100%; display: none" id="ad">
<img src="image/ad.png " id="adimg" 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>

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

标签：

相关文章推荐

新的分享

章节导航