CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）

html-css022

CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）,第1张

简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。

不能发视频，截图来代替吧

1.显示 轮播图1（实际轮播的第2个元素li）

2.显示 轮播图2（实际轮播的第3个元素li）

3.显示 轮播图3（实际轮播的第4个元素li）

4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。