纯Css制作轮播

下面这个是用纯Css制作的轮播效果，由于Css无法做到js一样精准操控，所以有些效果是无法实现的，比如在轮播的同时支持用户左右滑动效果，所以Css只能实现一些基本的效果。

HTML结构:

首先要有一个容器作为轮播图的容器，因为需要实现滑动切换效果，所以内部需要一个装载所以有待切换内容的子容器。图片也需要并排显示。

Css实现静态效果：

轮播图内的每一页内容的宽高都是相同的，且等于主容器（showBox）的宽高。

而子容器（imgBox）的宽高就必然要大于外部的主容器。因为它需要装载五张图片，而外部主容器只需要一张图片的大小。后面再给外部的主容器添加一个属性（overflow）超出范围隐藏，所以子容器里面除了可以看到第一张图片，其他都看不见。

现在打开浏览器就可以看到轮播图的静态效果。

Css实现轮播效果：

    轮播效果也就是一个动画效果，我们可以通过Css3的属性 animation 定义一个动画来达到轮播效果。下面先来了解一下animation这个属性。

animation的name值是动画名，动画名可以通过 @keyframes 创建自定义动画规则。

主要思路：要实现轮播动画效果，本质上就是让内部承载内容的子容器进行位移，从而使不同位置的内容一次展示出来。

一共有五张图片需要展示，如果轮播总耗时10s，那么每张图片应该有2s的时间，而每张图片耗时的构成是切换耗时+展示耗时，如果切换耗时500ms，展示耗时就应该是1500ms。

代码下面：

    虽然Css也能实现轮播效果，但是对于js实现来说，功能性就弱了很多，无法控制暂停与播放，无法与用户产生交互，无法监听到状态变化等等，但好处也很明显，就是简单，快捷。