知乎文章地址：https://zhuanlan.zhihu.com/p/48350702
輪播圖一直是一個很有意思的東西，之前沒有好好總結，導致一要寫的時候就要重新開始思考過程然後編碼，這是個特別煩的問題，今天就好好總結一下。
關於輪播器的一些demo，請看：
因爲考慮到方法實在是太多了，這裏就以css的實現方式來進行記錄。yaodebian/Carousel因爲考慮到方法實在是太多了，這裏就以css的實現方式來進行記錄。
首先來看一下示例吧：
接下來看實現的一個思路是怎樣的吧。
首先來看一下主體的html代碼：
<section class="slider-container">
<!-- 輪播器 -->
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
<li class="slider-item slider-item4"></li>
<li class="slider-item slider-item5"></li>
</ul>
</section>
上面是slider是輪播器的容器，讓我們再看一下相關的一些css樣式：
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.slider-container {
width: 50%;
position: relative;
margin: 0 auto;
}
.slider,
.slider-item {
padding-bottom: 40%;
}
.slider-item {
position: absolute;
width: 100%;
background-size: 100%;
}
.slider-item1 {
background-image: url(imgs/1.jpg);
}
.slider-item2 {
background-image: url(imgs/2.jpg);
}
.slider-item3 {
background-image: url(imgs/3.jpg);
}
.slider-item4 {
background-image: url(imgs/4.jpg);
}
.slider-item5 {
background-image: url(imgs/5.jpg);
}
.slider-container充當容器並將其設置爲relative以充當一個定位，爲了圖片能夠自適應輪播器的寬度，我們將圖片通過background-image來進行設置，同時設置background-size爲100%。另外，設置圖片的高度顯然是不合理的，上面我們通過設置padding-bottom來顯示圖片相應高度的區域(利用背景在padding中也可以呈現)。
好了，準備到這裏，我們接下來就需要通過css設置動畫了，我們僅僅通過animation結合@keyframes就可以辦到。我們先來看一張設計圖：
因爲css不能設置每兩張的一個間隔時間，對於我們要應用的動畫，我們將每一張圖片都考慮進去。對於每一張圖片，都會經歷這樣一個過程，我們假設圖片1s內從透明過渡爲不透明，然後保持顯示狀態3秒，然後再通過1s從不透明過渡爲透明，這樣，我們在上面的圖片中進行了每張圖片的一個動畫推演，圖片2在圖片1開始隱藏時開始動畫過程，圖片3在圖片2開始隱藏時開始動畫過程，以此類推，最後發現輪播完全部5張圖片時，總共需要花費20秒，也就是說，每張圖片在完成一個動畫過程後還需要等待15s纔會重新執行該動畫過程。
所以，我們的動畫可以設置成這樣：
@keyframes fade {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
對輪播圖應用動畫：
.slider-item {
position: absolute;
width: 100%;
background-size: 100%;
animation: fade 20s linear;
animation-iteration-count: infinite;
}
對每個輪播圖設置動畫延遲：
.slider-item{
opacity:0;
}
.slider-item1{
animation-delay: -1s;
}
.slider-item2{
animation-delay: 3s;
}
.slider-item3{
animation-delay: 7s;
}
.slider-item4{
animation-delay: 11s;
}
.slider-item5{
animation-delay: 15s;
}
一開始大家都是透明的，另外因爲一開始圖片1當然是顯示的，所以它的延遲爲-1，即透明度一開始爲1。
通過上面的設置就可以實現基本的輪播動畫效果了。
最後，爲了給輪播進行一個標識，就是我當前是輪播到第幾張圖片了，以及總共有多少張輪播圖片，我們可以對輪播器添加焦點標識（原理和上面的輪播一樣的啦）：
<section class="slider-container">
<!-- 輪播器 -->
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
<li class="slider-item slider-item4"></li>
<li class="slider-item slider-item5"></li>
</ul>
<!-- 輪播焦點 -->
<div class="focus-container">
<ul class="floatfix">
<li>
<div class="focus-item focus-item1"></div>
</li>
<li>
<div class="focus-item focus-item2"></div>
</li>
<li>
<div class="focus-item focus-item3"></div>
</li>
<li>
<div class="focus-item focus-item4"></div>
</li>
<li>
<div class="focus-item focus-item5"></div>
</li>
</ul>
</div>
</section>
css樣式：
.focus-container{
position:absolute;
bottom:2%;
z-index:7;
left:50%;
margin-left: -45px;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
opacity: 0;
background:#51B1D9;
border-radius:inherit;
animation-duration: 20s;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item1{
animation-delay: -1s;
}
.focus-item2{
animation-delay: 3s;
}
.focus-item3{
animation-delay: 7s;
}
.focus-item4{
animation-delay: 11s;
}
.focus-item5{
animation-delay: 15s;
}
最後，完整的代碼詳見：