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的代码如下:

<div class="swiper">
            <ul class="swiper-wrapper">
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
            </ul>
</div>

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

完成

推荐阅读更多精彩内容