如何用纯CSS实现轮播图效果

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

当我们在学习JavaScript的时候，会学习怎么实现一个轮播图，但是如果不使用JavaScript能不能实现轮播图的效果呢，那么接下来我们一起用css实现一个简易的轮播图。

解决方案

1、结构搭建：

首先要有一个容器作为轮播图的容器，同时要实现图片切换，所以内部要有一个装所有待切换内容的子容器。由于子容器中的内容是左右切换的，所以要将内容左右排列开。

Html代码如下：

2、 CSS实现静态效果：

轮播图内每一页内容的宽高，且应该等于祝融其的宽高。.loop-images-container的宽高必然有一个大于外部主容器，所以overflow属性应设置为hidden。现在在浏览器中打开页面，就可以看到只有一张图片的静态页面，除了第一张图片，其他图片都不可见。

3、实现动态效果：

在这时候我们需要先了解animation这个属性

要实现动画，本质上是子容器里面的图片通过位移来展示出来，我们这里一共有五张图片，假设整个轮播耗时10s，那么每一张图片需要2s，其中切换耗时500ms，所以每张图片展示的时间是1500ms。我们这样改CSS：

这样就用纯css实现了轮播图效果

结语

由于CSS无法做到和js一样的精准操控，所以有些效果是无法实现的，比如在轮播的同时支持用户左右滑动。这样做出来的轮播图功能性就弱了很多，无法控制暂停与播放，无法与用户产生交互。好处就是很简单。

更多精彩文章：

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！