🚀 欢迎访问我的博客：https://wk-blog.vip

轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。

自动轮播在线演示：https://wk-china.gitee.io/rotation-chart/auto.html

手动轮播在线演示：https://wk-china.gitee.io/rotation-chart/manual

所谓的轮播图，其实就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示，这就类似于舞台剧表演，支撑轮播图的内容进行展示的元素就相当于舞台，而轮播图展示的内容就是各个演员的表演，图片存储的地方就相当于舞台后边的演员准备区。那么，有了这样一个基本思路，类比着舞台剧的表演过程，我们就可以构思出，使用css来实现轮播图的一个基本方法。

这一步就相当于“舞台”的搭建，只有有了“舞台”我们才能对我们的表演进行展示。

html代码如下（示例）：

css代码如下（示例）：

这里我们以轮播图一张一张的进行展示，所以我们容器的宽度和高度要和我们进行展示的图片的高度和宽度保持一致，这样我们轮播图就能一张一张的显示，由于我们的展示窗口只能展示一张图片，所以还需要使用overflow:hidden来隐藏其余超出窗口部分的图片。

这一步就相当于“后台”的搭建，“后台”是干什么的?“后台”就是专门用来给演员们准备和休息的地方，我们的轮播图也一样，也需要一个地方来将我们的图片进行一个存放和准备。

代码如下（示例）：

css代码如下（示例）：

作为我们的图片存储区域，它的宽度应该是所有图片的宽度之和，高度的话应该和图片的高度一致，这样才能保证图片能够全部存入，又不浪费资源（这里以五张图片为例）。

有了“舞台”和“后台”，我们还需要一个关键的元素，那就是我们的“演员”，也就是轮播图的展示图片。

html代码如下（示例）：

css代码如下（示例）：

图片的宽度和高度需要和展示窗口的宽度和高度保持一致

这一步就像当于演员表演的动作，我们要为图片添加上动画，这样图片才能动起来，进而实现图片轮播的效果。

html代码如下（示例）：

要使轮播图动起来可以通过关键帧来设置图片的 margin-left 的偏移量或者 translateX 的偏移量。

html代码如下（示例）：

css代码如下（示例）：

手动轮播利用 input 的 checked 状态来为 a 标签添加选中状态，通过 a 标签链接 ,布局方式采用的是 input + a 标签，不可以添加父级，不然css无法选择到 banner-img-container

通过监测被选中的 input 标签来为其兄弟级 a 标签设置高亮样式，以此来实现轮播图圆点点击高亮效果。

通过 input 的checked状态来为 轮播图图片容器 添加动画

这里用到了 reset.css 来清除浏览器的默认样式，和我们的轮播图样式没有关系，reset.css 如下：

1.首先进行轮播图展示容器的搭建，宽度和高度要和图片保持一致。 2.存储图片容器搭建，要求宽度为所有图片的宽度之和，高度和图片保持一致。 3.要为图片开启浮动（并不是唯一方法），使图片排成一行。 4.为图片设置动画，使图片动起来。

https://gitee.com/wk-china/rotation-chart