纯 CSS 实现轮播图

·  阅读 5381
纯 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: flexjustify-contentalign-items 设定为 centermin-height 设定为 100vh 达到。

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

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

topleft 设定为 0,现在可以见到三个数字重叠了。

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

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

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

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

实现轮播图切换

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

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

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

在三张轮播图的下方,加入一个 <div>,class 是 controls-visible,里面加入三个 <label> 标签,<label>for 属性指定为 radio 按钮的 id,所以分别是 control-1control-2control-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 起码课,我们一起加油!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改