言

輪播圖已經(jīng)是一個(gè)很常見的東西，尤其是在各大App的首頁頂部欄，經(jīng)常會輪番顯示不同的圖片。

一提到輪播圖如何實(shí)現(xiàn)時(shí)，很多人的第一反應(yīng)就是使用Javascript的定時(shí)器，當(dāng)然這種方法是可以實(shí)現(xiàn)的。不過就是有些繁瑣，今天這篇文章我們來看看如何不用Javascript，而使用純CSS代碼去實(shí)現(xiàn)輪播圖吧。

這篇文章的所有代碼我都放在了github上，感興趣的同學(xué)可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html

CSS

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

首先我們來看看只使用CSS實(shí)現(xiàn)的輪播圖效果。

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

具體分析

看到上述的實(shí)現(xiàn)效果后，我們來具體分析下頁面的構(gòu)成。

• 頁面在布局上首先要有5張圖片，圖片固定寬度。

• 每張圖片對應(yīng)一個(gè)標(biāo)題，標(biāo)題通過ul>li實(shí)現(xiàn)，事先算好寬度，跟隨圖片一起滾動。

• 下邊有個(gè)1,2,3,4,5表示圖片順序的索引，鼠標(biāo)放上去后會顯示對應(yīng)的圖片。

HTML頁面

接下來我們通過代碼層面去看看整個(gè)效果是如何實(shí)現(xiàn)的。

首先來看看HTML頁面的實(shí)現(xiàn)，代碼中都有每個(gè)區(qū)域的描述。

HTML頁面

CSS部分

實(shí)現(xiàn)這個(gè)效果主要是通過CSS代碼的，其代碼量比較大，我們分開來看。

• 外層容器

對于最外層容器我們設(shè)置絕對定位，方便圖片標(biāo)題子元素的定位。

外層容器

• 圖片標(biāo)題

對于圖片的標(biāo)題我們也采用絕對定位，并且讓標(biāo)題橫向一行展示，方便在動畫的時(shí)候直接橫向滾動。

得到的代碼如下所示。

圖片標(biāo)題

• 圖片與圖片容器

接下來是設(shè)置圖片容器屬性以及圖片的基本大小。

圖片容器也采用絕對定位，寬度可以動態(tài)設(shè)置，根據(jù)圖片數(shù)量計(jì)算。每張圖片設(shè)置寬度與高度，得到的代碼如下。

圖片與圖片容器

• 圖片動畫效果

然后設(shè)置圖片的動畫效果，對于任意的圖片都有進(jìn)入和靜止兩個(gè)狀態(tài)，中間的效果可以任意定制。

在這里，中間效果設(shè)置成5%的間隔，其他時(shí)間在進(jìn)行位置的切換，因?yàn)閳D片是處于水平分布，通過設(shè)置margin-left的值為負(fù)數(shù)進(jìn)行偏移即可。

圖片動畫效果

• 數(shù)字索引的基本屬性

對于下面的數(shù)字圖標(biāo)也是通過基本的CSS屬性進(jìn)行設(shè)置的，包括寬高，行高，透明度等等。

在鼠標(biāo)移動到對應(yīng)的數(shù)字上后，數(shù)字會顯示不同的顏色。而且在鼠標(biāo)停留在數(shù)字上后，動畫效果會暫停。

數(shù)字索引基本屬性

• 數(shù)字索引的偏移量
  

因?yàn)閿?shù)字是水平方向展示的，因此要設(shè)定每個(gè)數(shù)字的水平偏移量。

數(shù)字水平偏移量

• 鼠標(biāo)停在數(shù)字上的動畫效果

然后就是處理鼠標(biāo)停留在數(shù)字上的動畫效果，因?yàn)槊繌垐D片對應(yīng)特定的數(shù)字，需要計(jì)算出每次的動畫開始位置和結(jié)束位置。

鼠標(biāo)停在數(shù)字上的動畫效果

• 動畫效果賦予指定的數(shù)字

最后一步就是將定義的動畫效果賦予指定的數(shù)字上，每個(gè)數(shù)字都有特定的id。得到的代碼如下。

動畫效果賦予指定的數(shù)字

至此所有步驟完成了，就可以得到文章開始的動畫效果了。

結(jié)束語

這篇文章完全通過CSS實(shí)現(xiàn)了一個(gè)輪播圖的效果，相比于使用JS來說減少頁面阻塞程度，效果更好。

者：忽如寄

鏈接：https://www.jianshu.com/p/28643f36011e

一、隨便說幾句####

css3動畫效果的強(qiáng)大不言而喻，自它出現(xiàn)一直熱度不減，它與js動畫的優(yōu)劣也一直成為前端界爭論的話題，不可置疑的是css3動畫的出現(xiàn)在一定程度上降低了動畫效果的實(shí)現(xiàn)難度，利于前端的學(xué)習(xí)，其精簡的代碼量把我們從煩人的js調(diào)試中解放出來，當(dāng)然css的動畫效果有其局限性，我們不能只用css3模擬出全部的就是動畫，另外就是瀏覽器的兼容性問題。我們這次用css3實(shí)現(xiàn)一個(gè)輪播圖效果，體驗(yàn)一下css3的強(qiáng)大。

首先說明我們可次只實(shí)現(xiàn)了自動輪播，效果也是最常見的淡入淡出，并未實(shí)現(xiàn)點(diǎn)擊輪換效果，至少在我目前水平來看，自動輪播與點(diǎn)擊輪換兩者純css3只能選其一，如果可以同時(shí)實(shí)現(xiàn)兩種效果的方法，請告訴我。

二、布局###

<section class="slider-contaner">
 <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>

html代碼沒有什么可說的，樣式的話首先必定slider的大盒子必定是相對定位，另外我們采用在li標(biāo)簽中添加background-image，因?yàn)檫@樣才有可能用純的css實(shí)現(xiàn)響應(yīng)式，另外背景圖為了在響應(yīng)式中看清全貌，必然使用background-size:100%，另外就是高度問題了，顯然slider-container必需是和li的高度一致，因?yàn)轫憫?yīng)式中必然這個(gè)高度不能固定死，所以使用height屬性顯然不行，padding屬性可以解決這個(gè)問題，一是background-image可以顯示在padding中，二是padding中以%為單位是以父元素寬度為基準(zhǔn)的。

*{
 margin:0;
 padding:0;
}
ul,li{
 list-style: none;
}
.floatfix {
 *zoom: 1;
}
.floatfix:after {
 content: "";
 display: table;
 clear: both;
}
.slider-contaner{
 width:100%;
 position:relative;
}
.slider,.slider-item{
 padding-bottom:40%;
}
.slider-item{
 width:100%;
 position:absolute;
 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);
}

三、設(shè)計(jì)動畫####

淡入淡出效果肯定是使用opacity，首先整體來看所有圖片的淡入淡出都是同一個(gè)動畫，只是時(shí)間不一樣而已，這肯定是利用animation-delay來控制，動畫無限輪換肯定使用animation-iteration-count: infinite，我們這次5張圖片，整個(gè)動畫分為圖片停留和淡入淡出兩個(gè)效果，用下圖表示，箭頭表示淡入淡出過程。

因?yàn)閏ss3中沒有一個(gè)屬性是規(guī)定兩次動畫播放的時(shí)間間隔，所以我們必須把其他圖片淡入淡出時(shí)該圖片的效果寫進(jìn)動畫里，顯然這時(shí)候是opacity:0；

我們?yōu)榱藢憚赢嫷姆奖悖瑒赢嬍褂镁€性函數(shù)，也就是animation-timing-function:linear;整個(gè)過程使用20s，一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是15%和5%；

@keyframes fade{
0%{
 opacity:0;
 z-index:2;
}
5%{
 opacity:1;
 z-index: 1;
}
20%{
 opacity:1;
 z-index:1;
}
25%{
 opacity:0;
 z-index:0;
}
100%{
 opacity:0;
 z-index:0;
}
}

接下來就是為每張圖片添加animation-delay了，因?yàn)榈谝粡垐D片必須顯示在最前，所以其他通過相鄰兄弟選擇器使用opacity:0，第一張圖片開始不需要淡入淡出，直接跳至停留也就是5%，所以animation-delay為-1s，第二章圖片和第一張相隔20%，也就是4s，animation-delay為3s，以此類推

.slider-item + .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;
}

這個(gè)時(shí)候我們的輪播圖可以動了

四、添加輪播焦點(diǎn)####

添加輪播焦點(diǎn)當(dāng)然不是為了點(diǎn)擊，而是告訴訪問者這里有幾張圖片和目前圖片的位置，至少以我個(gè)人而言，輪播焦點(diǎn)很重要，因?yàn)槿绻也恢垒啿サ膱D片有幾張，我又沒有辦法點(diǎn)擊，我就會非常不安，感覺自己沒有看到整個(gè)網(wǎng)頁的全貌。所以我們還是添加一下輪播焦點(diǎn)。首先非常明確的這個(gè)仍然可以使用上面的動畫，另外布局肯定使用position：absolute，另外很明顯焦點(diǎn)我們必須寫兩次，一次是當(dāng)前圖片的樣式，一次是非當(dāng)前圖片的樣式

<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>
.focus-container{
 position:absolute;
 bottom:2%;
 z-index:7;
 margin:0 auto;
 left:0;
 right:0;
}
.focus-container ul{
 margin-left:46%;
}
.focus-container li{
 width:10px;
 height:10px;
 border-radius:50%;
 float:left;
 margin-right:10px;
 background:#fff;
}
.focus-item{
 width:100%;
 height:100%;
 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;
}

五、梳理代碼####

如果你維護(hù)過別人的代碼你就會知道，代碼梳理對于后期維護(hù)的重要性了，沒有經(jīng)過梳理的css代碼，隨心所欲寫到哪里就是哪里，對于后期維護(hù)來說簡直就是一場災(zāi)難，css代碼梳理個(gè)人認(rèn)為首先必須添加必要的注釋，將css代碼分區(qū)，另外就是盡量減少后期修改需要修改的地方，這個(gè)主要是代碼重構(gòu)的問題，這個(gè)問題我已經(jīng)在編寫代碼的時(shí)候考慮到了，所以主要任務(wù)就是添加注釋和告訴維護(hù)者代碼最常修改的地方，我們遵循最常修改的代碼放到最后的原則。

我們來分析一下我們的代碼如果給別人用可能需要修改的地方，首先肯定是圖片路徑，所以我們把這個(gè)樣式放在最后，然后是圖片高度，輪播焦點(diǎn)的顏色，動畫時(shí)間的設(shè)置（這里還涉及圖片個(gè)數(shù)），輪播焦點(diǎn)的位置，當(dāng)然輪播焦點(diǎn)大小也可能修改。重構(gòu)后代碼如下：

<section class="slider-contaner">
<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 reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/
/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/
/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*設(shè)置輪播焦點(diǎn)的位置*/
.focus-container{
bottom:2%;
}
/*設(shè)置當(dāng)前圖片焦點(diǎn)的顏色*/
.focus-item{
background:#51B1D9;
}
/*設(shè)置動畫，請根據(jù)實(shí)際需要修改秒數(shù)*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*設(shè)置背景，響應(yīng)式請利用媒體查詢根據(jù)斷點(diǎn)修改路徑*/
.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);
}
/*設(shè)置圖片的高度，請根據(jù)具體需要修改百分比，響應(yīng)式及時(shí)修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}

六、最后扯兩句####

這種css3實(shí)現(xiàn)的輪播圖，缺點(diǎn)也是不言而喻，點(diǎn)擊輪換和自動輪換兩者只能選其一，不過自動輪換可以用在手機(jī)端，這是一個(gè)不錯(cuò)的選擇，另外，現(xiàn)在的網(wǎng)站大都是通欄設(shè)計(jì)，網(wǎng)頁文字很少，尤其是網(wǎng)站首頁更是如此，有時(shí)候比的不是網(wǎng)站設(shè)計(jì)的優(yōu)劣，反而是誰選的圖片好看，誰就有可能受到青睞，這種情況我們其實(shí)可以考慮將輪播圖變?yōu)楸尘暗妮啌Q，這時(shí)候輪播焦點(diǎn)也就可以不使用了，相信你的博客首頁或者產(chǎn)品首頁使用背景輪換，效果會非常不錯(cuò)的