纯 CSS 实现轮播图

大家好，我是 Steven。

今集我们会尝试只用 HTML 和 CSS，实现基础的轮播图效果，当然会有一些功能的缺失，例如不能自动跳转，但我们来看看用 CSS 可以实现到多少。

这个教程的视频版本在 www.bilibili.com/video/BV1Bt… ，欢迎三连关注！

HTML 的部分

打开 CodePen 编辑器，先建立 HTML 的结构，轮播图我会用 <ul> 去制作，加入 <ul> 标签，class 是 slides。里面新增三个 <li> 标签，class 是 slide，三张 slide 分别填上 1, 2 和 3。

CSS 的部分

然后到 CSS 的部份，加入 body 选择器，将页面的内容置中，可以通过加入 display: flex，justify-content 与 align-items 设定为 center，min-height 设定为 100vh 达到。

然后加入 ul.slides 选择器，设定轮播图容器的样式，position 设定为 relative，宽度设定为 600px，高度设定为 280px。然后取消原本列表的属性，list-style 设定为 none。margin 和 padding 设定为 0，然后加入一个浅灰色的背景，方便看到它的大小。

再加入 li.slide，设定单张轮播图的样式，margin 与 padding 设定为 0，宽度与高度继承父容器的大小，设定为 inherit，然后 position 设定为 absolute。

top 和 left 设定为 0，现在可以见到三个数字重叠了。

加入三个选择器，分别设定三张轮播图的背景颜色，它们是 .slide:nth-of-type(1)、2 和 3，设定第一张 slide 的背景颜色是黄色 #F2E205，第二张是橙红色 #F25C05，第三张是蓝色 #495F8C。

再调整一下它们的位置，第二张图在第一张图的右边，在第二张图的设定里，加入 left: 100%，在第三张图的设定里加入 left: 200%，现在可以看到三张图已经横向并列在一起了。

回到 .slide 选择器的样式设定，加入 display: flex，justify-content 与 align-items 设定为 center，然后放大字体及设定颜色，font-family 设定为 Helvetica，文字大小设定为 120px，颜色设定为白色。

再到 slides 选择器加入 overflow: hidden 就可以将突出的第二和第三张轮播图隐藏。

实现轮播图切换

现在样式已经设定好了，下一步就加入按钮实现轮播图切换。可以同过表单元素 radio 按钮配合 CSS 选择器达到。

回到 HTML 的部份，在 <li> 标签之前加入三个 radio 按钮，分别定义 id 为 control-1、control-2 和 control-3，我们会在稍后透过 <label> 去引用到它。然后要定义相同的 name，这样就可以将它们归纳为同一组按钮，第一个 radio 按钮内再加上 checked，预设拣选了它。

目前 radio 按钮被三张轮播图遮住了，在 CSS 那边暂时加入 input[type="radio"] 选择器，设定 position: relative 和 z-index: 100，这样就可以看到 radio 按钮，方便我们了解接下来的部份。

在三张轮播图的下方，加入一个 <div>，class 是 controls-visible，里面加入三个 <label> 标签，<label> 的 for 属性指定为 radio 按钮的 id，所以分别是 control-1，control-2 和 control-3。

然后我们会将这三个 <label> 透过 CSS 调整成一个圆点的样式，在 CSS 的部份加入 .controls-visible 和 .controls-visible label 选择器，首先设定容器的样式，设定 position: absolute，宽度是 100%，设定 bottom 距离底部 12px，然后 text-align 设定为 center。

再到 label 的样式设定，加入 display: inline-block，宽度和高度设定为 10px，背景颜色设定为白色，圆角设定为 50%，就会变成一个圆形。然后 margin 设定为上下 0，左右 3px，最后，加入一个白色的框线 border: 2px solid #fff。

现在试试点击三个 label，看到它们可以控制到对应的 radio 按钮：

接下来有两个问题要解决：

第一，是调整被点击 label 的样式，显示为已选择
第二，是进行轮播图的切换

这些都可以通过 CSS 选择器去达到。

我们先看看 HTML 的结构，三个 radio 按钮在上边，这个排序是很重要的，我们之所以要将 radio 写在上面，label 写在下边再控制上边的 radio，是因为可以透过 radio:checked 判断已选择的 radio 按钮，再透过 ~ 波浪符号找它同一层之后的元素。

而因为 CSS 只能找之后同一层的元素，不能找之前同一层的元素，所以 radio 按钮就写了在上边。

首先加入 .slides input[type="radio"]:nth-of-type(1):checked，判断当第一个 radio 按钮是已选择的状态，加入 ~ 波浪符号，找它同一层之后，.controls-visible 里面的 label:nth-of-type(1) ，选择到第一个 label，设定 background-color 是深灰色。现在就可以看到点击第一个 label 的时候，显示为选中的样式：

然后复制这段设定，再设定第二和第三个 label，这样 label 的样式设定就完成了。

最后，设定轮播图切换的效果，加入 .slides input[type="radio"]:nth-of-type(1):checked，~ 波浪符号 .slide。这个意思是，当选中了第一个 radio 按钮之后，后面三张 .slide 的样式。由于我们本身已经将三张 slide 横向排列好，所以只需要因应 radio 按钮，将三个 slide 向左移动特定的距离就可以。

当选择了第一个 radio 按钮时，将 transform 设定为 translatex(0%)。
当选中了第二个 radio 按钮时，将 transform 设定为 translatex(-100%)，即是向左移动一倍的宽度，就可以将第二张轮播图显示出来。
当选中了第三个 radio 按钮时，将 translatex() 设定为 -200%，这样就可以了。

然后回到 .slide 选择器，加入动画过渡的设定，transition: .5s transform ease-in-out，以及将 radio 按钮的 display 设定为 none 将它隐藏。

我们来看看这个案例的完成效果

好了，这个就是用纯 CSS 制作出来的轮播图，大家会发现没有向左跳转和向右跳转的按钮，这个部份留给大家动手试试，原理和底下三个 label 的做法是类似的。

而答案在这里，大家可以参考一下：codepen.io/stevenlei/p…

至于为什么没有自动跳转的功能，这里应该就要用上 JavaScript 了，虽然用 @keyframes 是可以做到定时跳转，不过又配合不到手动跳转的情况。如果大家发现有其他做法的话，欢迎留言交流一下。

以上，就是用 CSS 实现轮播图效果的全部内容。

这个案例的源代码在 codepen.io/stevenlei/p…

你的支持是我的动力，请关注 CodingStartup 起码课，我们一起加油！