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

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

实现效果：

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

示意图1.png

示意图2.png

示意图3.png

实现思路

1. 使用 div+ul+li 的页面布局方式（div 的宽度和 li 的宽度相同）；
2. 在 ul 中横向排列5个 li 元素（ul 的宽度 >= 5个 li 元素的和），排列顺序为 ：轮播图3--轮播图1--轮播图2--轮播图3--轮播图1（为了滑动的连贯性不会出现倒滑现象做此设置），要设置 ul 的默认左边距，使页面默认显示第2个 li 元素（也就是轮播图1）；
3. 使 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

完成