一提到轮播图如何实现时，很多人的第一反应便是利用Javascript的定时器，当然这种方法是可以实现的。不过便是有些繁琐，本日这篇文章我们来看看如何不用Javascript，而利用纯CSS代码去实现轮播图吧。
这篇文章的所有代码我都放在了github上，感兴趣的同学可以去看看。
https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html
CSS
实现效果首先我们来看看只利用CSS实现的轮播图效果。
实现效果图
详细剖析看到上述的实现效果后，我们来详细剖析下页面的构成。
页面在布局上首先要有5张图片，图片固定宽度。
每张图片对应一个标题，标题通过ul>li实现，事先算好宽度，跟随图片一起滚动。
下边有个1,2,3,4,5表示图片顺序的索引，鼠标放上去后会显示对应的图片。
HTML页面接下来我们通过代码层面去看看全体效果是如何实现的。
首先来看看HTML页面的实现，代码中都有每个区域的描述。
HTML页面
CSS部分实现这个效果紧张是通过CSS代码的，其代码量比较大，我们分开来看。
外层容器
对付最外层容器我们设置绝对定位，方便图片标题子元素的定位。
外层容器
图片标题
对付图片的标题我们也采取绝对定位，并且让标题横向一行展示，方便在动画的时候直接横向滚动。
得到的代码如下所示。
图片标题
图片与图片容器
接下来是设置图片容器属性以及图片的基本大小。
图片容器也采取绝对定位，宽度可以动态设置，根据图片数量打算。每张图片设置宽度与高度，得到的代码如下。
图片与图片容器
图片动画效果
然后设置图片的动画效果，对付任意的图片都有进入和静止两个状态，中间的效果可以任意定制。
在这里，中间效果设置成5%的间隔，其他韶光在进行位置的切换，由于图片是处于水平分布，通过设置margin-left的值为负数进行偏移即可。
图片动画效果
数字索引的基本属性
对付下面的数字图标也是通过基本的CSS属性进行设置的，包括宽高，行高，透明度等等。
在鼠标移动到对应的数字上后，数字会显示不同的颜色。而且在鼠标勾留在数字上后，动画效果会停息。
数字索引基本属性
数字索引的偏移量
由于数字是水平方向展示的，因此要设定每个数字的水平偏移量。
数字水平偏移量
鼠标停在数字上的动画效果
然后便是处理鼠标勾留在数字上的动画效果，由于每张图片对应特定的数字，须要打算出每次的动画开始位置和结束位置。
鼠标停在数字上的动画效果
动画效果授予指定的数字
末了一步便是将定义的动画效果授予指定的数字上，每个数字都有特定的id。得到的代码如下。
动画效果授予指定的数字
至此所有步骤完成了，就可以得到文章开始的动画效果了。
结束语这篇文章完备通过CSS实现了一个轮播图的效果，比较于利用JS来说减少页面壅塞程度，效果更好。
