手撸一个简易版轮播图
实现原理，通过控制 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 来实现）；
- 4. 把 上一张 和下一站按钮 通过定位的方式 固定到 左边/右边；
直接通过调试工具改变 swiper-warpper 的 left 属性值，可以查看具体的效果：
下一篇我们一起来看看如何通过JavaScript来控制切换上一张或下一张。