轮播图效果你还只会用Javascript实现吗？来看看纯CSS实现方法吧

前言

轮播图已经是一个很常见的东西，尤其是在各大App的首页顶部栏，经常会轮番显示不同的图片。

一提到轮播图如何实现时，很多人的第一反应就是使用Javascript的定时器，当然这种方法是可以实现的。不过就是有些繁琐，今天这篇文章我们来看看如何不用Javascript，而使用纯CSS代码去实现轮播图吧。

这篇文章的所有代码我都放在了github上，感兴趣的同学可以去看看。

CSS

实现效果

首先我们来看看只使用CSS实现的轮播图效果。

实现效果图

具体分析

看到上述的实现效果后，我们来具体分析下页面的构成。

HTML页面

接下来我们通过代码层面去看看整个效果是如何实现的。

首先来看看HTML页面的实现，代码中都有每个区域的描述。

HTML页面

CSS部分

实现这个效果主要是通过CSS代码的，其代码量比较大，我们分开来看。

对于最外层容器我们设置绝对定位，方便图片标题子元素的定位。

外层容器

对于图片的标题我们也采用绝对定位，并且让标题横向一行展示，方便在动画的时候直接横向滚动。

得到的代码如下所示。

图片标题

接下来是设置图片容器属性以及图片的基本大小。

图片容器也采用绝对定位，宽度可以动态设置，根据图片数量计算。每张图片设置宽度与高度，得到的代码如下。

图片与图片容器

然后设置图片的动画效果，对于任意的图片都有进入和静止两个状态，中间的效果可以任意定制。

在这里，中间效果设置成5%的间隔，其他时间在进行位置的切换js实现鼠标移上去显示详细信息，因为图片是处于水平分布，通过设置margin-left的值为负数进行偏移即可。

图片动画效果

对于下面的数字图标也是通过基本的CSS属性进行设置的，包括宽高，行高，透明度等等。

在鼠标移动到对应的数字上后，数字会显示不同的颜色。而且在鼠标停留在数字上后，动画效果会暂停。

数字索引基本属性

因为数字是水平方向展示的，因此要设定每个数字的水平偏移量。

数字水平偏移量

然后就是处理鼠标停留在数字上的动画效果，因为每张图片对应特定的数字，需要计算出每次的动画开始位置和结束位置。

鼠标停在数字上的动画效果

最后一步就是将定义的动画效果赋予指定的数字上，每个数字都有特定的id。得到的代码如下。

动画效果赋予指定的数字

至此所有步骤完成了，就可以得到文章开始的动画效果了。

结束语

这篇文章完全通过CSS实现了一个轮播图的效果，相比于使用JS来说减少页面阻塞程度js实现鼠标移上去显示详细信息，效果更好。