前言

轮播图已经是很常见的东西了，尤其是在各大app的首页顶栏，经常会依次显示不同的图片。

说到如何实现轮播图，很多人的第一反应是用Javascript timer。当然，这个方法是可以实现的。但就是有点繁琐。今天，在本文中，我们来看看如何用纯CSS代码代替Javascript实现轮播。

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

https://github . com/zhouxiong king/article-pages/blob/master/articles/carousel/carousel。超文本标记语言

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

实现效果

首先我们来看看carousel只用CSS的效果。

实施效果图

具体分析

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

在页面布局上，必须有五张固定宽度的图片。

每张图片对应一个标题，标题由定义>:李，预先计算宽度，随图片滚动。

下面有一个1，2，3，4，5的索引，表示图片的顺序。当鼠标放在上面时，会显示相应的图片。

HTML页面
接下来我们从代码层面来看看整个效果是如何实现的。

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

HTML页面

CSS部分

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

总容器

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

总容器

图片标题

我们对图片的标题也采用了绝对定位，让标题水平连续显示，方便动画时直接水平滚动。

结果代码如下所示。

图片标题

图片和图片容器

接下来，设置图片容器的属性和图片的基本大小。

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

图片和图片容器

图片动画效果

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

这里中间效果设置为5%的音程，其他时间位置切换。因为图片是水平分布的，所以可以通过将margin-left的值设置为负值来偏移它。

图片动画效果

数字索引的基本属性

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

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

数字索引的基本属性

数字索引的偏移量

因为数字是水平显示的，所以设置每个数字的水平偏移量。

数字偏移

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

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

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

动画效果给出了指定的数字。

最后一步是将定义的动画效果分配给指定的数字，每个数字都有一个特定的id。结果代码如下。

动画效果给出了指定的数字。

现在所有的步骤都完成了，就可以得到文章开头的动画效果了。

结束语

本文一个轮播图的效果完全用CSS实现，比用JS降低页面阻塞程度要好。