|
问题描述 当我们在学习JavaScript的时候，会学习怎么实现一个轮播图，但是如果不使用JavaScript能不能实现轮播图的效果呢，那么接下来我们一起用css实现一个简易的轮播图。 解决方案 1、结构搭建： 首先要有一个容器作为轮播图的容器，同时要实现图片切换，所以内部要有一个装所有待切换内容的子容器。由于子容器中的内容是左右切换的，所以要将内容左右排列开。 Html代码如下： 2、 CSS实现静态效果： 轮播图内每一页内容的宽高，且应该等于祝融其的宽高。.loop-images-container的宽高必然有一个大于外部主容器，所以overflow属性应设置为hidden。现在在浏览器中打开页面，就可以看到只有一张图片的静态页面，除了第一张图片，其他图片都不可见。 3、实现动态效果： 在这时候我们需要先了解animation这个属性 要实现动画，本质上是子容器里面的图片通过位移来展示出来，我们这里一共有五张图片，假设整个轮播耗时10s，那么每一张图片需要2s，其中切换耗时500ms，所以每张图片展示的时间是1500ms。我们这样改CSS： 这样就用纯css实现了轮播图效果 结语 由于CSS无法做到和js一样的精准操控，所以有些效果是无法实现的，比如在轮播的同时支持用户左右滑动。这样做出来的轮播图功能性就弱了很多，无法控制暂停与播放，无法与用户产生交互。好处就是很简单。 |
|
|
