簡(jiǎn)單demo：使用HTML+CSS 實(shí)現(xiàn)輪播圖（三張圖為例，分別為：紅、綠、藍(lán)）的效果。

實(shí)現(xiàn)效果：

不能發(fā)視頻，截圖來(lái)代替吧

示意圖1.png

示意圖2.png

示意圖3.png

實(shí)現(xiàn)思路

1. 使用 div+ul+li 的頁(yè)面布局方式（div 的寬度和 li 的寬度相同）；
2. 在 ul 中橫向排列5個(gè) li 元素（ul 的寬度 >= 5個(gè) li 元素的和），排列順序?yàn)?：輪播圖3--輪播圖1--輪播圖2--輪播圖3--輪播圖1（為了滑動(dòng)的連貫性不會(huì)出現(xiàn)倒滑現(xiàn)象做此設(shè)置），要設(shè)置 ul 的默認(rèn)左邊距，使頁(yè)面默認(rèn)顯示第2個(gè) li 元素（也就是輪播圖1）；
3. 使 ul 進(jìn)行動(dòng)畫移動(dòng)，利用屬性 “overflow: hidden” 使 li 依序顯示出現(xiàn)輪滑效果。

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;
}

/*自動(dòng)播放*/
.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);*/
}

/*動(dòng)畫*/
@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（實(shí)際輪播的第2個(gè)元素li）

輪播示意圖1.png

2.顯示 輪播圖2（實(shí)際輪播的第3個(gè)元素li）

{輪播示意圖2.png

3.顯示 輪播圖3（實(shí)際輪播的第4個(gè)元素li）

輪播示意圖3.png

4.顯示 輪播圖1（實(shí)際輪播的第5個(gè)元素li,之后會(huì)緊跟著重復(fù)以上動(dòng)作）

輪播示意圖4.png

完成