<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*整个body*/
#bodyDiv{
width: 85%;
margin:0 auto;/*设置body居中*/
}
/*第一栏logo*/
.logoDiv{
float: left;
width: 33%;
height: 80px;
}
.logoDiv a{
text-decoration:none;/*去下划线*/
line-height: 80px; /*设置line-height与父级元素的height相等*/
/*overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
.clear{
clear: both;/*去除浮动*/
}
/*菜单栏*/
#menuDiv{
width: 100%;
height: 40px;
background-color: black;
}
#menuDiv a{
font-size: 20px;
color: white;
line-height: 40px;
text-decoration:none;/*去下划线*/
}
/*图片滚动栏*/
#imgDiv{
width: 100%;
}
/*最新商品*/
.product{
width: 100%;
}
.contentclass{
width: 100%;
}
.contentclass font{
font-size: 30px;
color: black;
}
/*底部链接*/
.linkDiv a{
font-size: 15px;
color: blue;
text-decoration: none;
}
</style>
<script>
var time;
window.onload = function(){
//设置定时
time = window.setInterval("show()",5000);
window.setInterval("changeImg()",5000);
}
//广告显示与隐藏
function show() {
var advertising = document.getElementById("adDiv");
advertising.style.display = "block";
//清除定时
window.clearInterval(time);
//设置新定时
time = window.setInterval("hide()",5000);
}
function hide() {
var adHide = document.getElementById("adDiv");
adHide.style.display = "none";
window.clearInterval(time);
}
//图片轮播
var i = 1;
function changeImg() {
i++;
//获得图片控制权
if(i > 3) {
i = 1;
}
var img1 = document.getElementById("img1");
img1.src = "img/"+i+".jpg";
}
</script>
</head>
<body>
<!--整个body-->
<div id="bodyDiv">
<!--
广告,display首先设为none,即不显示广告。
-->
<div style="width: 100%;display: none;" id="adDiv">
<img src="image/2.jpg" width="100%" id="advertising" />
</div>
<!--logo栏-->
<div>
<div class="logoDiv">
<img src="img/logo2.png" />
</div>
<div class="logoDiv">
<img src="img/header.jpg" />
</div>
<div class="logoDiv" style="vertical-align:middle">
<a href="#" >登录</a>
<a href="#" >注册</a>
<a href="#" >购物车</a>
</div>
<div class="clear"></div>
</div>
<!--菜单栏-->
<div id="menuDiv">
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
<a href="#">烟酒茶糖</a>
<a href="#">鞋靴箱包</a>
</div>
<!--图片滚动栏-->
<div id="imgDiv">
<img src="img/okwu-athletics.jpg" id="img1" width="100%"/>
</div>
<!--热门商品栏-->
<div class="product">
<!--
热门商品+图片
-->
<div class="contentclass">
<font><b>热门商品</b></font><img src="images/title2.jpg"/>
</div>
<!--
商品类型
-->
<div style="width: 100%">
<!--第一列-->
<div style="width: 16%;height: 460px;float: left;" >
<img src="image/big01.jpg" width="100%" height="100%"/>
</div>
<!--剩下的横着排的-->
<div style="width: 84%;height: 460px;float: left;">
<!--第一行-->
<div>
<div style="width: 48%;height: 230px;float: left;">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 16%;height: 230px;float: left;">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
<!--第二行-->
<div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
</div>
</div>
</div>
<!--广告栏-->
<div style="width: 100%;">
<img src="image/ad.jpg" width="100%" height="100%">
</div>
<!--最新商品栏-->
<div class="product">
<!--
最新商品+图片
-->
<div class="contentclass">
<font><b>最新商品</b></font><img src="images/title2.jpg"/>
</div>
<!--
商品类型
-->
<div style="width: 100%">
<!--第一列-->
<div style="width: 16%;height: 460px;float: left;" >
<img src="image/big01.jpg" width="100%" height="100%"/>
</div>
<!--剩下的横着排的-->
<div style="width: 84%;height: 460px;float: left;">
<!--第一行-->
<div>
<div style="width: 48%;height: 230px;float: left;">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 16%;height: 230px;float: left;">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
<!--第二行-->
<div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
</div>
</div>
</div>
<!--图片栏-->
<div style="width: 100%;">
<img src="image/footer.jpg" width="100%"/>
</div>
<!--底栏-->
<center>
<div class="linkDiv" >
<a href="#" >关于我们</a>
<a href="#" >联系我们</a>
<a href="#" >招贤纳士</a>
<a href="#" >法律声明</a>
<a href="#" >友情链接</a>
<a href="#" >支付方式</a>
<a href="#" >配送方式</a>
<a href="#" >服务方式</a>
<a href="#" >广告声明</a>
</div>
<div>
<font>--------------------------------------------------------------------------------------------------</font>
<br />
<font> Copyright © 2005-2016 传智商城 版权所有 </font>
</div>
</center>
</div>
</body>
</html>
JS realizes the timing hiding of advertisements and the rotation of pictures
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325654579&siteId=291194637
Ranking