console
var slideIndex = 1;
var slideImg = $(".slide-img");
var slidePicker = $(".slide-picker");
function slideMove() {
slide = setInterval(function() {
$("#slide" + slideIndex).fadeIn("slow").siblings().fadeOut("slow");
slideIndex++;
if (slideIndex > slideImg.length) {
slideIndex = 1;
}
},
2000);
}
function slidePause() {
clearInterval(slide);
}
slidePicker.mouseover(function() {
var pickerId = $(this).attr("data-pickerid");
$("#slide" + pickerId).fadeIn("slow").siblings().fadeOut("slow");
slidePause();
}).mouseout(slideMove);
slideMove();
var featureTab = $(".feature-tab");
featureTab.click(function() {
var tabId = $(this).attr("data-tabid");
$("#panel" + tabId).fadeIn("slow").siblings().fadeOut("slow");
});
<body>
<header>
<div class="header-element logo">
<img src="http://p1.bqimg.com/583742/796532fd4f7bb5cd.png">
</div>
<div class="header-element search-bar">
<input type="text" placeholder=" 搜索商品">
<button type="button">
搜索
</button>
</div>
<div class="login">
<a href="javascript:void(0)">
登录
</a>
||
<a href="javascript:void(0)">
注册
</a>
</div>
</header>
<nav>
<ul>
<li>
<a href="javascript:void(0)">
首页
</a>
</li>
<li>
<a href="javascript:void(0)">
品牌
</a>
</li>
<li>
<a href="javascript:void(0)">
女装
</a>
</li>
<li>
<a href="javascript:void(0)">
男装
</a>
</li>
<li>
<a href="javascript:void(0)">
鞋包配饰
</a>
</li>
</ul>
</nav>
<section class="main-content">
<div class="side-menu">
<div class="side-menu-title">
商品分类
</div>
<ul class="side-menu-cat">
<h4 class="side-menu-cat-name">
推荐品牌
</h4>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
耐克
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
阿迪达斯
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
达芙妮
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
李宁
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
安踏
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
特步
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
奥康
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
锐步
</a>
</li>
</ul>
<ul class="side-menu-cat">
<h4 class="side-menu-cat-name">
女装
</h4>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
T恤
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
毛呢大衣
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
衬衫
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
羽绒服
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
连衣裙
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
针织
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
皮外套
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
羊绒衫
</a>
</li>
</ul>
<ul class="side-menu-cat side-menu-cat-last">
<h4 class="side-menu-cat-name">
男装
</h4>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
夹克
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
T恤
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
牛仔裤
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)" class="hot-item">
卫衣
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
风衣
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
西服
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
衬衫
</a>
</li>
<li class="side-menu-cat-item">
<a href="javascript:void(0)">
韩版
</a>
</li>
</ul>
</div>
<div class="right">
<div class="right-up">
<div class="slide">
<div class="slide-pickers">
<div class="slide-picker" data-pickerid="1">
Slide 1
</div>
<div class="slide-picker" data-pickerid="2">
Slide 2
</div>
<div class="slide-picker" data-pickerid="3">
Slide 3
</div>
</div>
<div class="slide-imgs">
<img src="http://p1.bqimg.com/583742/ac929ca706598367.png" class="slide-img"
id="slide1">
<img src="http://p1.bqimg.com/583742/e847039e4921fad2.png" class="slide-img"
id="slide2">
<img src="http://p1.bqimg.com/583742/ab15a7523bfa8612.png" class="slide-img"
id="slide3">
</div>
</div>
<div class="info">
<div class="info-title">
<h4>
最新动态
</h4>
<ul class="info-list">
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
<li class="info-list-item">
<span>
[活动]
</span>
<a href="javascript:void(0)">
耐克运动年终大促
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="feature">
<div class="feature-title">
<h4>
品牌活动
</h4>
<ul class="feature-tabs">
<li class="feature-tab" data-tabid="1">
女装
</li>
<li class="feature-tab" data-tabid="2">
男装
</li>
</ul>
</div>
<div class="feature-panel">
<div class="feature-items" id="panel1">
<div class="feature-item">
<img src="http://placehold.it/235x160">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x160">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x160">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x160">
</div>
</div>
<div class="feature-items" id="panel2">
<div class="feature-item">
<img src="http://placehold.it/235x161">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x161">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x161">
</div>
<div class="feature-item">
<img src="http://placehold.it/235x161">
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
Designed by
<a href="http://blog.csdn.net/alenhhy" target="_blank">
Alen Hu
</a>
</footer>
</body>
* {
font-family: '微软雅黑', sans-serif;
}
body {
width: 1200px;
margin: 10px auto;
}
header,
footer {
height: 60px;
}
header:after {
content: '';
display: block;
clear: both;
}
.header-element {
float: left;
}
.logo {
width: 200px;
height: 60px;
margin-left: 30px;
}
.search-bar {
margin-left: 60px;
line-height: 60px;
}
.search-bar > input {
width: 300px;
height: 30px;
border: 1px solid #EB9532;
border-radius: 5px;
}
.search-bar > button {
width: 100px;
height: 34px;
border: none;
background: #EB9532;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.login {
float: right;
margin-right: 30px;
line-height: 60px;
color: #EB9532;
}
.login > a {
color: #EB9532;
}
nav {
background: #EB9532;
height: 50px;
border-radius: 5px;
}
nav > ul {
margin: 0;
padding: 0;
}
nav > ul > li {
float: left;
list-style: none;
width: 80px;
text-align: center;
margin: 0 5px;
line-height: 50px;
}
nav > ul > li > a {
text-decoration: none;
color: #fff;
display: block;
width: 100%;
height: 50px;
}
nav > ul > li > a:hover {
background: #fff;
color: #EB9532;
}
.main-content {
margin-top: 10px;
}
.main-content:after {
content: '';
display: block;
clear: both;
}
.side-menu {
float: left;
width: 200px;
height: 400px;
border: 1px solid #EB9532;
border-radius: 5px;
margin-right: 10px;
}
.side-menu-title {
height: 35px;
line-height: 35px;
padding: 0 10px;
background: #EB9532;
color: #fff;
}
.side-menu-cat {
list-style: none;
padding: 10px;
margin: 5px 0;
border-bottom: 1px solid #EB9532;
}
.side-menu-cat-last {
border: none !important;
}
.side-menu-cat:after {
content: '';
display: block;
clear: both;
}
.side-menu-cat-name {
font-size: 14px;
margin: 5px 0;
color: #666666;
}
.side-menu-cat-item {
float: left;
margin: 5px 7px 5px 0;
font-size: 14px;
}
.side-menu-cat-item > a {
color: #666666;
;
text-decoration: none;
}
.hot-item {
color: #CF000F !important;
}
.right {
float: left;
width: 988px;
height: 400px;
}
.right:after {
content: '';
display: block;
clear: both;
}
.right-up {
margin-bottom: 10px;
}
.right-up .feature {
float: left;
}
.right-up:after {
content: '';
display: block;
clear: both;
}
.slide,
.info {
float: left;
}
.slide {
width: 700px;
height: 200px;
margin-right: 10px;
}
.slide-img {
position: absolute;
}
.slide-pickers {
position: absolute;
z-index: 1;
}
.slide-picker {
width: 70px;
height: 60px;
line-height: 60px;
background: rgba(235, 149, 50, 0.4);
font-size: 12px;
color: #fff;
text-align: center;
cursor: pointer;
}
.slide-picker:not(:last-child) {
margin-bottom: 10px;
}
.info {
width: 276px;
height: 198px;
border: 1px solid #EB9532;
border-radius: 5px;
}
.info-title {
width: 100%;
height: 30px;
font-size: 14px;
padding: 5px 10px;
}
.info-title > h4:after {
content: '';
display: block;
width: 256px;
border-bottom: 1px solid #EB9532;
margin: 5px 0;
}
.info-title > h4 {
margin: 10px 0;
color: #666666;
}
.info-list {
padding: 0;
margin: 0;
list-style: none;
}
.info-list-item {
margin: 5px 0;
}
.info-list-item > span {
color: #CF000F;
}
.info-list-item> a {
color: #666666;
text-decoration: none;
}
.info-list-item> a:hover {
color: #EB9532;
}
.feature {
width: 988px;
height: 190px;
}
.feature:after {
content: '';
display: block;
clear: both;
}
.feature-title {
width: 100%;
height: 30px;
font-size: 14px;
}
.feature-title:after {
content: '';
display: block;
clear: both;
}
.feature-title > h4 {
float: left;
margin: 0;
color: #666666;
}
.feature-title > ul {
float: right;
}
.feature-title > ul {
padding: 0;
margin: 0;
list-style: none;
}
.feature-title > ul:after {
content: '';
display: block;
clear: both;
}
.feature-title > ul > li {
float: left;
width: 60px;
height: 25px;
line-height: 25px;
margin: 0 10px;
text-align: center;
border: 1px solid #EB9532;
color: #EB9532;
border-radius: 5px;
cursor: pointer;
}
.feature-title > ul > li:hover,
.feature-title > ul > li:focus,
.feature-title > ul > li:active {
background: #EB9532;
color: #fff;
}
.feature-items {
width: 988px;
}
.feature-items:after {
content: '';
display: block;
clear: both;
}
.feature-item {
float: left;
width: 235px;
height: 160px;
padding: 0;
}
.feature-item:not(:last-child) {
margin-right: 16px;
}
#panel2 {
display: none;
}
#panel1,
#panel2 {
position: absolute;
}
footer {
text-align: center;
line-height: 60px;
background: #EB9532;
margin-top: 10px;
color: #fff;
border-radius: 5px;
}
footer > a {
color: #fff;
text-decoration: none;
}
footer > a:hover {
text-decoration: underline;
}