html中轮播图跳转,纯 CSS 实现轮播图

大家好，我是 Steven。

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

HTML 的部分

打开 CodePen 编辑器，先建立 HTML 的结构，轮播图我会用

• 去制作，加入
  • 标签，class 是 slides。里面新增三个
  • 标签，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。