言

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

一提到轮播图如何实现时，很多人的第一反应就是使用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来说减少页面阻塞程度，效果更好。

言

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

一提到轮播图如何实现时，很多人的第一反应就是使用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来说减少页面阻塞程度，效果更好。

• 吧，用swiper做轮播图其实很简单，特别是官网在使用说明上已经讲得很清楚了。
• 但我还是在这里唠叨几下。
• 现有的js库是很丰富的，其实我们常用到的组件都有了，轮播图就是其中之一。
• 本文就讲一下怎么用swiper做轮播图，因为它是一个很出名的轮播图组件。
• 更多文章请关注我的头条号，我是落笔承冰。

一、百度一下“swiper”，进入它的中文官网。

• swiper历经了多个版本，我们就用最新的swiper4来说说吧。

二、调用swiper的方法有很多种，比如用npm安装之类的，这里我们就用下载css和js库文件来实现吧。

• 解压后，里面有很多文件，找哪个呢？就是这两个，一个是css，一个是js。

三、我们创建一个空白test.html文件来添加swiper。

• 引用刚才我们下载的那两个文件。

四、开始做html部分。

• 接下来放入轮播的模块了。

五、大家知道html只是一个外表，js才是内核，于是我们加入js部分。

• 轮播是可以用了，但是真的很很不成看，只有一个很小的范围可以轮播。

六、我们试着改一下轮播图的大小，并加个颜色。

• 我们用谷歌浏览器F12进入控制台，模拟手机界面看一下效果。

七、果然是满宽高只有一半，可怎么划动，只能划到第三块，怎么样才能让三回到一，循环划动呢，加个loop:true就可以了。

• 然后我们再改改样式，让里面的字变大居中，变白色，再把body的边距去掉。

八、再加个功能，让它自动播，我不动手，让它每秒跑到下一下张图。

九、我们再加个分页器，分页器是什么东西，就是轮播下方的一个个小圆点，一点就是一页，这里我们应该有三个点。

十、小圆点是有了，也会随图滚动了，可是它不能点击啊，那好，我们加入这个就可以了点了。

• 还真的可以点击了。

十一、人家的轮播图有左右按钮可以控制图片上一张下一张，我们也可以加。

• 在js里声明相应的对象

十二、即然只是入门，那么到这里就可以了，更多的使用方法，大家可以去官网查一下，最后，我把图片放进去，做出真正的轮播图吧。

• 我搞了三张图，三张图宽高大小不一，直接放进去了，多少会让某些图片少一截或是只看见一部分，这个问题大家自己修改图片或添加样式来处理了，我就不再说了。