html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/小米(重写 copy 3.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3587443_s3iw7ctmmp8.css">
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<script src="./swiper/swiper-bundle.min.js"></script>
</head>
<main>
<div class="main-wrap">
<div class="swiper">
<!-- 图片 -->
<div class="swiper-wrapper" id="swiper">
<div class="swiper-slide">
<img src="./image/轮播图1.webp" alt="" />
</div>
<div class="swiper-slide">
<img src="./image/轮播图2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./image/轮播图3.webp" alt="" />
</div>
<div class="swiper-slide">
<img src="./image/轮播图4.webp" alt="" />
</div>
<div class="swiper-slide">
<img src="./image/轮播图5.webp" alt="" />
</div>
</div>
<div class="swiper-pagination" id="pagination"></div>
<div class="swiper-button-prev " id="prev"></div>
<div class="swiper-button-next " id="next"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper',{
effect: 'fade',
pagination:{
el: '.swiper-pagination',
clickable: true,
clickableClass : 'my-pagination-clickable',
},
})
</script>
<script language="javascript">
var mySwiper = new Swiper('.swiper',{
effect: 'fade',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<div class="main-left">
<ul>
<li>
<span>手机</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>电视</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>笔记本 平板</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>出行 穿戴</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>耳机 音箱</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>家电</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>智能 路由器</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>电源 配件</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>健康 儿童</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
<li>
<span>生活 箱包</span>
<i class="iconfont icon-arrow-right"></i>
<div class="main-left-list">
</div>
</li>
</ul>
</div>
</div>
</main>
css部分
main{
width: 100%;
height: 460px;
}
.main-wrap{
width: 1226px;
height: 460px;
/* background-color: pink; */
margin: 0 auto;
position: relative;
}
.swiper{
width: 1226px;
height: 460px;
overflow: hidden;
position: relative;
}
.swiper img{
width: 100%;
}
/* 侧边栏 */
.main-left{
position: absolute;
padding-top: 15px;
font-size: 14px;
z-index: 20;
left: 0;
top: 0;
width: 234px;
height: 445px;
background-color: rgba(97, 97, 97,.7);;
}
.main-left>ul>li{
color: #e0e0e0;
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
/* background-color: pink; */
}
.main-left>ul>li:hover{
background-color: #ff6700;
}
.main-left>ul>li .icon-arrow-right{
font-size: 20px;
float: right;
color: #e0e0e0;
margin-right: 30px;
}
/* 右拉框 */
.main-left-list{
position: absolute;
top: 0;
left: 234px;
width: 992px;
height: 458px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 2px 0 10px rgb(0 0 0 / 15%);
display: none;
}
.main-left>ul>li:hover .main-left-list{
display: block;
}
/* 轮播图 */
/* 分页器 */
#pagination {
width: 400px;
position: absolute;
bottom: 20px;
right: 30px;
left: auto;
text-align: right;
}
#pagination *{
width: 6px;
height: 6px;
border: 2px solid hsla(0,0%,100%,.3);
border-radius: 10px;
overflow: hidden;
opacity: 1;
cursor: pointer;
}
/* 左右箭头*/
#prev,#next{
z-index: 18;
position: absolute;
top: 50%;
margin-top: -34.5px;
width: 41px;
height: 69px;
line-height: 60px;
color: #e0e0e0;
}
#prev{
left: 234px;
}
#next{
right: 0;
}
#prev:hover,#next:hover{
background-color: rgba(0, 0, 0, .7);
}