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

- 日理万妓 2023-01-19 14:52 5阅读 0赞

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

1 问题描述

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

1.  解决方案

1.  结构搭建：

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

Html代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70][]

2、 CSS实现静态效果：

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

3、 实现动态效果：

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

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

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

4 总结

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70]: /images/20221021/5d903eb2f83a4eac836c114b360a4cd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 1]: /images/20221021/a72d02c1be0949bf977dfcafbef2c16e.png