持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
轮播图在我们的项目中设计很经常使用的，在平时写的时候一般我们都会使用一些第三方的库，因为其考虑的情况一般都会比较多，更加符合我们的业务场景，但是其实我们自己实现一个简易的轮播图其实也不难。常用于实现轮播图的就两种方法，如果要实现的较为花里胡哨，那么肯定少不了js的加持，那能不能用纯css实现一个轮播图呢？接下来我们就来看看怎么用纯css实现一个轮播图。
布局
首先我们简单的进行一个布局让我们的轮播图居中显示
<!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>
</head>
<body>
<div class="swiper">
<div class="main">
</div>
</div>
</body>
</html>
<style>
.swiper{
background-color: #ccc;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main{
width: 300px;
height: 150px;
border-radius: 30px;
background-color: red;
}
</style>
思路
我们要实现轮播图的效果就是要让图片横向动起来，这其实就是动画的过程，那么就要用到我们的transform。让我们的图片横向移动，然后我们图中的红色是我们的展示区域，没有轮到展示的图片我们就进行隐藏即可。
<!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>
</head>
<body>
<div class="swiper">
<div class="main">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</div>
</body>
</html>
<style>
.swiper{
background-color: #ccc;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main{
width: 300px;
height: 150px;
border-radius: 30px;
background-color: red;
}
.img{
background-size: cover;
height: 100%;
}
.img1{
background-image: url(./1.png);
}
.img2{
background-image: url(./2.png);
}
.img3{
background-image: url(./3.png);
}
</style>
我们可以看到图片是竖着排列的，我们的轮播图是要横向移动的所以应该让其横着来，那么只要给它来个绝对定位，父元素来个相对定位之后设置位置就可以了，同时超过展示区的地方我们应该隐藏所以要给父元素设置overflow：hidden；。
<!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>
</head>
<body>
<div class="swiper">
<div class="main">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</div>
</body>
</html>
<style>
.swiper{
background-color: #ccc;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main{
position: relative;
width: 300px;
height: 150px;
border-radius: 30px;
background-color: red;
overflow: hidden;
}
.img{
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
}
.img1{
background-image: url(./1.png);
}
.img2{
background-image: url(./2.png);
left: 100%;
}
.img3{
background-image: url(./3.png);
left: 200%;
}
</style>
这样我们静态的就基本好了，为了能够操作我们的轮播图，那我们应该来几个操控点，这里我们借助input标签，因为我们要用到它的checked状态，来监听是否有点击事件。
<!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>
</head>
<body>
<div class="swiper">
<div class="main">
<input type="radio" name="choose" checked />
<input type="radio" name="choose" />
<input type="radio" name="choose" />
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</div>
</body>
</html>
<style>
.swiper {
background-color: #ccc;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
position: relative;
width: 300px;
height: 150px;
border-radius: 30px;
background-color: red;
overflow: hidden;
display: flex;
justify-content: center;
}
.img {
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
}
.img1 {
background-image: url(./1.png);
}
.img2 {
background-image: url(./2.png);
left: 100%;
}
.img3 {
background-image: url(./3.png);
left: 200%;
}
input {
width: 10px;
height: 10px;
border-radius: 10px;
z-index: 9;
}
input:nth-of-type(1):checked ~.img {
transform: translateX(0);
}
input:nth-of-type(2):checked ~.img {
transform: translateX(-100%);
}
input:nth-of-type(3):checked ~.img {
transform: translateX(-200%);
}
</style>
当我们的input的checked属性改变的时候我们的图片就进行偏移，这样就实现了图片的轮播，但是现在加载的还是有点生硬，我们给加上过度。
.img {
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
+transition: all 0.5s;
}
