簡單demo：使用HTML+CSS 實現(xiàn)輪播圖（三張圖為例扫步，分別為：紅魔策、綠、藍）的效果河胎。
實現(xiàn)效果：
不能發(fā)視頻闯袒，截圖來代替吧
示意圖1.png
示意圖2.png
示意圖3.png
實現(xiàn)思路
- 使用 div+ul+li 的頁面布局方式（div 的寬度和 li 的寬度相同）；
- 在 ul 中橫向排列5個 li 元素（ul 的寬度 >= 5個 li 元素的和）游岳，排列順序為 ：輪播圖3--輪播圖1--輪播圖2--輪播圖3--輪播圖1（為了滑動的連貫性不會出現(xiàn)倒滑現(xiàn)象做此設置）政敢，要設置 ul 的默認左邊距，使頁面默認顯示第2個 li 元素（也就是輪播圖1）吭历；
- 使 ul 進行動畫移動堕仔，利用屬性 “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;
}
/*自動播放*/
.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
