手撸一个简易版轮播图
实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果。
页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版轮播图</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="swiper-container">
<div class="swiper-warpper">
<div class="swiper-item">
<img src="./images/banner-01.jpg" alt="">
</div>
<div class="swiper-item">
<img src="./images/banner-02.jpg" alt="">
</div>
<div class="swiper-item">
<img src="./images/banner-03.jpg" alt="">
</div>
</div>
<div class="control">
<div class="prev-btn"><</div>
<div class="next-btn">></div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
页面样式
.container{
width: 600px;
margin: 100px auto 0;
}
.swiper-container{
position: relative;
margin: 0 auto;
width: 520px;
height: 280px;
/* 这里先把超出隐藏注释 方便查看布局效果 */
/*overflow: hidden;*/
}
.swiper-container .swiper-warpper{
position: absolute;
left: 0;
top: 0;
width: 1560px;
height: 280px;
}
.swiper-container .swiper-warpper .swiper-item{
float: left;
}
.swiper-container .control{
position: absolute;
left: 0;
right: 0;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.swiper-container .control .prev-btn,.swiper-container .control .next-btn{
width: 50px;
height: 50px;
line-height: 50px;
font-size: 24px;
color: #000;
text-align: center;
background-color: rgba(0,0,0,.3);
}
布局说明
- swiper-container主要包裹整个轮播图布局:固定宽高,相对定位,溢出隐藏;
- swiper-warpper主要包裹图片(banner): 宽度为所有图片宽度加起来的和,高度等于父级高度,重点是相对定位,因为轮播效果就是通过控制 swiper-warpper 的 left 属性的值来控制的;
- .swiper-item 主要包裹图片:宽高度等于 swiper-container 的宽高,通过设置 float 等于 left 来让图片从左到右排列(也可以通过控制swiper-warpper 的 display 等于 flex 来实现);
- 把 上一张 和下一站按钮 通过定位的方式 固定到 左边/右边;
直接通过调试工具改变 swiper-warpper 的 left 属性值,可以查看具体的效果:
下一篇我们一起来看看如何通过JavaScript来控制切换上一张或下一张。