html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...

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

实现效果：

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

示意图1.png

示意图2.png

示意图3.png

实现思路

使用 div+ul+li 的页面布局方式(div 的宽度和 li 的宽度相同)；

在 ul 中横向排列5个 li 元素(ul 的宽度 >= 5个 li 元素的和)，排列顺序为 ：轮播图3--轮播图1--轮播图2--轮播图3--轮播图1(为了滑动的连贯性不会出现倒滑现象做此设置)，要设置 ul 的默认左边距，使页面默认显示第2个 li 元素(也就是轮播图1)；

使 ul 进行动画移动，利用属性 “overflow: hidden” 使 li 依序显示出现轮滑效果。

HTML的代码如下：

• 3
• 1
• 2
• 3
• 1

CSS的代码如下：

.swiper {

position: relative;

margin: 60px auto;

width: 600px;

height: 600px;

text-align: center;

font-family: Arial;

color: #FFF;

overflow: hidden;

}

/*自动播放*/

.swiper .swiper-wrapper {

margin-left: -600px;

animation: swiperAnim 9s infinite;

padding: 0;

width: 3000px;

height: 100%;

}

.swiper li {

float: left;

width: 600px;

list-style: none;

line-height: 600px;

font-size: 100px;

background-size: cover;

background-repeat: no-repeat;

text-align: center;

}

.swiper li:nth-child(1) {

background: blue;

/*background-image: url(../img/pic_8.png);*/

}

.swiper li:nth-child(2) {

background: red;

/*background-image: url(../img/pic_1.png);*/

}

.swiper li:nth-child(3) {

background: green;

/*background-image: url(../img/pic_2.png);*/

}

.swiper li:nth-child(4) {

background: blue;

/*background-image: url(../img/pic_8.png);*/

}

.swiper li:nth-child(5) {

background: red;

/*background-image: url(../img/pic_1.png);*/

}

/*动画*/

@keyframes swiperAnim {

0% {

margin-left: -600px;

}

28.5% {

margin-left: -600px;

}

33.3% {

margin-left: -1200px;

}

62% {

margin-left: -1200px;

}

66.7% {

margin-left: -1800px;

}

95.2% {

margin-left: -1800px;

}

100% {

margin-left: -2400px;

}

}

轮播示意图

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

轮播示意图1.png

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

{轮播示意图2.png

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

轮播示意图3.png

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

轮播示意图4.png

完成