css
<style>
* {margin: 0;padding: 0;}
ul {list-style: none;}
a {text-decoration: none; color:#333;}
.clearfix::after {
content: '';
display: block;
clear:both;
}
body {
overflow: auto;
font-size:14px;
}
header {
width: 100%;
height: 55px;
position: fixed;
background: #eee;
top:0;
}
header .nav {
width: 1200px;
height: 100%;
margin: 0 auto; /*块元素水平居中*/
}
header .nav .lf {
float: left ;
}
header .nav .lf li {
float:left ;
line-height: 55px;
padding: 0 10px;
}
header .nav .lf li:hover {
color: #222226;
background: #9e9ea1;
}
header .nav .rf {
float: right;
font-size:0;
}
header .nav .rf li {
line-height: 55px;
padding: 0 10px;
display: inline-block;
font-size:16px;
}
header .search {
width: 600px;
margin: 0 auto;
height: 100%;
font-size: 0;
}
header .search input {
width:460px;
height:30px;
margin:12px 0;
border-radius: 15px 0 0 15px;
border: 1px solid #e8e8ed;
outline: 0;
vertical-align: middle;
}
header .search .btn {
display: inline-block;
width: 60px;
height:32px;
vertical-align: middle;
font-size:12px;
line-height: 32px;
padding-left: 50px;
border-radius: 0 15px 15px 0 ;
color: #fff;
background:#FC293F url(https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-white-search.png) no-repeat 26px center / 22px 22px;
}
header .search .btn {
background-color: #fc5531;
}
/* 二级导航 */
.header .nav .l2 {
display: none; /* 隐藏2级导航*/
font-size: 14px;
font-weight: bold;
position: absolute;
left: 220px;
top:0;
width:980px;
min-height:395px;
border:1px solid #d8d8d8;
box-shadow: 2px -2px 5px #000 ; /* 设置盒子投影 */
z-index: 9999 ; /* 设置层级 */
background-color: #fff;
}
.header .nav .l2 > li {
position: relative;
height: 30px;
line-height: 30px;
width: 100px;
text-align: right;
font-size:12px;
}
.header .nav .l2 > li > a {
padding: 2px 5px;
}
.header .nav .l3 a {
padding: 2px 8px;
}
.header .nav .l2 > li > a::after,
.header .nav .l2 > li:first-child .l3 a::after {
content: '>' ;
padding-left:5px;
}
.header .nav .l2 > li:first-child > a {
background-color: #000;
color: #fff;
padding: 2px 15px;
}
.header .nav .l2 > li:first-child .l3 a {
background-color: #000;
color: #fff;
margin:0 5px;
}
.header .nav .l3 {
position: absolute;
left: 100px;
top: 0;
height:30px;
line-height:30px;
font-weight: 400;
width: 500px;
text-align: left;
}
.header .nav .l3 li {
float: left;
}
.header .nav {
position: relative;
width: 220px;
padding: 10px 0;
background:#f1f1f1;
color:#333;
}
.header .nav > li { /* 调整一级导航*/
height: 25px;
line-height: 25px;
padding-left:15px;
font-size:0;
}
.header .nav > li:hover {
background: #ccc;
}
.header .nav >li > a {
font-size:16px;
}
.header .nav >li > a::after {
content: '/';
padding:0 2px;
color: #333;
}
.header .nav >li > a:last-of-type::after {
content: '';
padding:0;
}
.header .nav a:hover {
color: #f00;
}
/* 二级导航 */
.header .nav >li:hover > ul.l2 {
display: block;
}
.header {
width: 1200px;
margin:55px auto 0;
position: relative;
}
/* 轮播图 */
.swiper {
width: 980px;
height: 395px;
position: absolute;
left: 220px;
white-space: nowrap; /* 强制内容不换行*/
overflow: hidden;
top: 0;
}
/*
.swiper img {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
.swiper img:first-of-type {
display: block;
}
*/
.swiper img {
width: 100%;
height: 100%;
}
.swiper .dots {
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
background-color:rgba(0,0,0, 0.3);
text-align: center;
line-height: 50px;
font-size: 0;
}
.swiper .dots span {
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 0 5px;
}
.swiper .dots span.active {
background: #f00;
}
.swiper .left, .swiper .right {
position: absolute;
height: 69px; /* 395 - 69 = 326*/
width: 42px;
top: 163px;
cursor: pointer;
}
.swiper .left {
background: url(../images/icon-slides.png) no-repeat -84px 0 ;
}
.swiper .right {
right: 0;
background: url(../images/icon-slides.png) no-repeat -126px 0 ;
}
.swiper .left:hover {
background: url(../images/icon-slides.png) no-repeat 0 0 ;
}
.swiper .right:hover {
background: url(../images/icon-slides.png) no-repeat -42px 0 ;
}
</style>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<div class="nav">
<ul class="lf">
<li><a href="">博客</a></li>
<li><a href="">课程</a></li>
<li><a href="">开发者商城</a></li>
<li><a href="">问答</a></li>
</ul>
<ul class="rf">
<li><a href="">会员中心</a></li>
<li><a href="">收藏</a></li>
<li><a href="">动态</a></li>
<li><a href="">消息</a></li>
</ul>
<div class="search">
<input type="text">
<a class="btn" href="javascript:void(0)">搜索</a>
</div>
</div>
</header>
<div class="header">
<ul class="nav">
<li>
<a href="">家用电器</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">手机</a><a href="">运营商</a><a href="">数码</a>
<ul class="l2">
<li>
<a href="">游戏手机</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">5G手机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">家居</a>
<a href="">家具</a>
<a href="">家装</a>
<a href="">厨具</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">男装</a>
<a href="">女装</a>
<a href="">童装</a>
<a href="">内衣</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">家用电器</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">手机</a><a href="">运营商</a><a href="">数码</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">家居</a>
<a href="">家具</a>
<a href="">家装</a>
<a href="">厨具</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">男装</a>
<a href="">女装</a>
<a href="">童装</a>
<a href="">内衣</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">家用电器</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">手机</a><a href="">运营商</a><a href="">数码</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">家居</a>
<a href="">家具</a>
<a href="">家装</a>
<a href="">厨具</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">男装</a>
<a href="">女装</a>
<a href="">童装</a>
<a href="">内衣</a>
<ul class="l2">
<li>
<a href="">家电管</a>
<ul class="l3">
<li><a href="">家电专卖</a></li>
<li><a href="">家电服务</a></li>
<li><a href="">企业采购</a></li>
</ul>
</li>
<li>
<a href="">电视</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">洗衣机</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
<li>
<a href="">空调</a>
<ul class="l3">
<li><a href="">全面屏电视</a></li>
<li><a href="">智慧屏</a></li>
<li><a href="">教育电视</a></li>
<li><a href="">4K超清</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="swiper" onmouseover="stopPlay()" onmouseout="autoPlay()">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/775d7c643be01abf0de63d030c1ae4f5.jpg?w=2452&h=920" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/73927a6ef08dacc1b828b8fa8b1727c3.jpeg?thumb=1&w=1533&h=575&f=webp&q=90" alt="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e34ddd6b7bcbfb90ed09e871d291593.png?thumb=1&w=1533&h=575&f=webp&q=90" alt="">
<!-- 显示轮播图的点 -->
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="left" onclick="leftSwitchImg()"></div>
<div class="right" onclick="rightSwitchImg()"></div>
</div>
</div>
</body>
</html>
JAVAscript
<script>
let index = 0 ; // 代表默认显示的图片的索引
// 将 轮播图中所有图片 全部隐藏
let imgs = document.querySelectorAll(".swiper img");
let playing = false ;
/**
* 显示对应的图片
*/
function showImg(index) {
// 遍历图片
Array.from(imgs).forEach( (img, i)=> {
if (index === i) {
// 显示图片
img.style.display = "block";
}else{
img.style.display = "none";
}
})
// 将 小红点 切换到对应的位置上
// 获取 小圆点
let stags = document.querySelectorAll(".swiper .dots span");
Array.from(stags).forEach( (sp, i)=> {
if (index === i) {
// 给小圆点设置为 红色
sp.classList.add("active");
}else{
// 去掉 对应的样式
sp.classList.remove("active");
}
})
}
/**
* 右切图
*/
function rightSwitchImg() {
if (index == imgs.length - 1) { // 当前显示的是最后一张图
index = -1 ; // 下一次再单机、显示第一张图
}
showImg(++index) ;
}
function leftSwitchImg() {
if (index == 0) { // 当前显示的第一张，
index = imgs.length ;
}
showImg(--index);
}
// 每间隔 2秒中，自动切换
function autoPlay() {
playing = setInterval(rightSwitchImg , 2000)
}
function stopPlay() {
clearInterval(playing);
}
autoPlay();
</script>
扫一扫
3105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
