css—轮播图实现

一、背景

最近和朋友在一起讨论的时候，我们提出了这样的一个提问，难道轮播图的效果只能通过js来实现吗？经过我们的一系列的争论，发现了这是可以通过纯css来实现这一效果的，CSS轮播图也是一种常见的网页展示方式，可以通过CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。那么今天一如既往的来一起来探讨一下如何去实现这一效果。

二、思路解析

这个效果并不是想想中的那么难，在这里我们需要使用到的有css中的属性也有css3中的属性，如果来阅读的小伙伴没有接触css3，也不用急，我会在接下来的一篇文章中详细介绍一下，这里使用到的css3的属性。

思路：

大家应该知道在很早之前的胶片电影的播放形式，我们这里的一个录播效果和胶片电影的思路是大同小异的，那么究竟是什么呢。

1、首先我们需要创建一个让用户观看轮播图的视口，也就是我们可以看到的部分；

2、既然有可以看到的部分，那就一定有不可以让用户看到的部分，所以超出的部分怎么办呢？这里我不做解释，留些思考的空间你们来想一下呢。

3、那么如何让这些图片动起来呢，这里就用到了css3中的属性，那就是动画属性，之后我会进行解释。

这就是基本的实现思路了。话不多说，直接进入代码实现阶段。

三、拆解分析阶段

注意：接下来的代码结构为了更好的让小伙伴们串联起来，所以采用了代码迭代的方式来讲解，在最后会添加代码的总体结构和css样式。

第一步我们就来创建我们的视口部分，在这里我们使用了div.wrap_out作为视口展示。

<div class="wrap_out"></div>

.wrap_out {width: 500px;height: 300px;margin: 300px auto;border: 2px solid #f00;}

第二步我们需要来创建存放我们所有需要展示的内容的容器，这里我们使用ul来充当这一个容器，在这里我们展示5张图片，所以这里我们需要给ul这个容器设置宽为25oopx，高度和视口高度一致。

<div class="wrap_out"><ul class="wrap"></ul></div>

  .wrap {width: 2500px;height: 300px;}

第三步，我们来创建存放每个内容的盒子，这里由于我们使用的是ul来融合这一部分，所以我们只要使用li来定义存放内容的盒子就可以。在这里我不使用图片讲解，我就直接使用不同的文字进行区分。

<div class="wrap_out"><ul class="wrap"><li>FIRST</li><li>SECOND</li><li>THIRD</li><li>FOURTH</li><li>FIFTH</li></ul></div>

.wrap > li {width: 500px;height: 300px;background-color: #f90;}

如果只这样写，那是肯定无法实现最终需要的效果的，所以现在我们需要让所有的盒子横向排列成一行，以方便之后的移动。只需要在之前的ul中更新为以下代码

   .wrap {width: 2500px;height: 300px;display: flex;}

增加完之后就会发现已经成为了我们初步想要实现的结果。

接下来就是把超出红色边框视口的部分隐藏。如下图：

      .wrap_out {width: 500px;height: 300px;margin: 300px auto;border: 2px solid #f00;overflow: hidden;}

现在我们视口中只能看到第一张图，其他的图片都在第一张的后边，那么接下来就不难想到了，只要让ul这个大盒子自己无限次的移动就可以了。

所以接下来我们需要来定制动画的规则，让他们动起来。

@keyframes wrap_animation {0% {transform: translate(0);}10% {transform: translate(0);}25% {transform: translate(-500px);}35% {transform: translate(-500px);}50% {transform: translate(-1000px);}60% {transform: translate(-1000px);}75% {transform: translate(-1500px);}85% {transform: translate(-1500px);}90% {transform: translate(-2000px);}100% {transform: translate(-2000px);}}

然后我们需要在需要设置动画的元素中引用我们已经定制好的规则。

.wrap {width: 2500px;height: 300px;display: flex;animation: wrap_animation 10s infinite linear;}

注意：这里需要注意不要将动画添加错元素

添加好之后就会发现静态的页面动起来了

但是会发现一个问题，就是在最后一张图之后会有一个白色的置空区域，那么如何解决呢，又是因为什么呢？

有空白的原因是应为我们的 transform: translate（）属性是以左边边框为基准点进行平移的，所以当我们移动到-2500px的时候就刚好会漏出那张白色的空白区域，所以我们只需要在最后添加一张和第一张图一样的区域，就可以实现轮播效果。

<ul class="wrap"><li style="background-color: #f00">FIRST</li><li style="background-color: #0f0">SECOND</li><li style="background-color: #00f">THIRD</li><li style="background-color: pink">FOURTH</li><li style="background-color: purple">FIFTH</li><li style="background-color: #f00">FIRST</li></ul>

这样我们的轮播图效果就完成了。

四、代码总览

1、html部分

<body><div class="box"><div class="wrap_out"><ul class="wrap"><li style="background-color: #f00">FIRST</li><li style="background-color: #0f0">SECOND</li><li style="background-color: #00f">THIRD</li><li style="background-color: pink">FOURTH</li><li style="background-color: purple">FIFTH</li><li style="background-color: #f00">FIRST</li></ul></div></div></body>

2、CSS部分

<style>* {margin: 0;padding: 0;}html {/* overflow-x: hidden; */}ul {list-style: none;}.box {width: 100vw;height: 100vh;display: flex;}.wrap_out {width: 500px;height: 300px;margin: 300px auto;border: 2px solid #f00;overflow: hidden;}.wrap {width: 3000px;height: 300px;display: flex;animation: wrap_animation 10s infinite linear;}.wrap > li {width: 500px;height: 300px;}@keyframes wrap_animation {0% {transform: translate(0);}10% {transform: translate(0);}25% {transform: translate(-500px);}35% {transform: translate(-500px);}50% {transform: translate(-1000px);}60% {transform: translate(-1000px);}75% {transform: translate(-1500px);}85% {transform: translate(-1500px);}90% {transform: translate(-2000px);}100% {transform: translate(-2000px);}}</style>