詳細介紹一篇用純css3實現的輪播圖效果執行個體

本篇文章主要介紹了純css3實現輪播圖效果執行個體，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

首先先看demo吧，點擊查看demo

一、隨便說幾句

css3動畫效果的強大不言而喻，自它出現一直熱度不減，它與js動畫的優劣也一直成為前端界爭論的話題，不可置疑的是css3動畫的出現在一定程度上降低了動畫效果的實現難度，利於前端的學習，其精簡的代碼量把我們從煩人的js調試中解放出來，當然css的動畫效果有其局限性，我們不能只用css3類比出全部的就是動畫，另外就是瀏覽器的相容性問題。我們這次用css3實現一個輪播圖效果，體驗一下css3的強大。首先說明我們可次只實現了自動輪播，效果也是最常見的淡入淡出，並未實現點擊輪換效果，至少在我目前水平來看，自動輪播與點擊輪換兩者純css3隻能選其一，如果可以同時實現兩種效果的方法，請告訴我。

二、布局

<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標籤中添加background-image，因為這樣才有可能用純的css實現響應式，另外背景圖為了在響應式中看清全貌，必然使用background-size:100%，另外就是高度問題了，顯然slider-container必需是和li的高度一致，因為響應式中必然這個高度不能固定死，所以使用height屬性顯然不行，padding屬性可以解決這個問題，一是background-image可以顯示在padding中，二是padding中以%為單位是以父元素寬度為基準的。

*{      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);}

三、設計動畫

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

因為css3中沒有一個屬性是規定兩次動畫播放的時間間隔，所以我們必須把其他圖片淡入淡出時該圖片的效果寫進動畫裡，顯然這時候是opacity:0；我們為了寫動畫的方便，動畫使用線性函數，也就是animation-timing-function:linear;整個過程使用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了，因為第一張圖片必須顯示在最前，所以其他通過相鄰兄弟選取器使用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;}

這個時候我們的輪播圖可以動了

四、添加輪播焦點

添加輪播焦點當然不是為了點擊，而是告訴訪問者這裡有幾張圖片和目前圖片的位置，至少以我個人而言，輪播焦點很重要，因為如果我不知道輪播的圖片有幾張，我又沒有辦法點擊，我就會非常不安，感覺自己沒有看到整個網頁的全貌。所以我們還是添加一下輪播焦點。首先非常明確的這個仍然可以使用上面的動畫，另外布局肯定使用position：absolute，另外很明顯焦點我們必須寫兩次，一次是當前圖片的樣式，一次是非當前圖片的樣式

<p class="focus-container"><ul class="floatfix"> <li><p class="focus-item focus-item1"></p></li><li><p class="focus-item focus-item2"></p></li><li><p class="focus-item focus-item3"></p></li><li><p class="focus-item focus-item4"></p></li><li><p class="focus-item focus-item5"></p></li></ul></p>

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

五、梳理代碼

如果你維護過別人的代碼你就會知道，代碼梳理對於後期維護的重要性了，沒有經過梳理的css代碼，隨心所欲寫到哪裡就是哪裡，對於後期維護來說簡直就是一場災難，css代碼梳理個人認為首先必須添加必要的注釋，將css代碼分區，另外就是盡量減少後期修改需要修改的地方，這個主要是代碼重構的問題，這個問題我已經在編寫代碼的時候考慮到了，所以主要任務就是添加註釋和告訴維護者代碼最常修改的地方，我們遵循最常修改的代碼放到最後的原則。

我們來分析一下我們的代碼如果給別人用可能需要修改的地方，首先肯定是圖片路徑，所以我們把這個樣式放在最後，然後是圖片高度，輪播焦點的顏色，動畫時間的設定（這裡還涉及圖片個數），輪播焦點的位置，當然輪播焦點大小也可能修改。重構後代碼如下：

<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><p class="focus-container"><ul class="floatfix"> <li><p class="focus-item focus-item1"></p></li><li><p class="focus-item focus-item2"></p></li><li><p class="focus-item focus-item3"></p></li><li><p class="focus-item focus-item4"></p></li><li><p class="focus-item focus-item5"></p></li></ul></p></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%;}/*設定輪播焦點的位置*/.focus-container{bottom:2%;}/*設定當前圖片焦點的顏色*/.focus-item{background:#51B1D9;}/*設定動畫，請根據實際需要修改秒數*/.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;}}/*設定背景，響應式請利用媒體查詢根據斷點修改路徑*/.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,.slider-item{padding-bottom:40%;}

六、最後扯兩句

這種css3實現的輪播圖，缺點也是不言而喻，點擊輪換和自動輪換兩者只能選其一，不過自動輪換可以用在手機端，這是一個不錯的選擇，另外，現在的網站大都是通欄設計，網頁文字很少，尤其是網站首頁更是如此，有時候比的不是網站設計的優劣，反而是誰選的圖片好看，誰就有可能受到青睞，這種情況我們其實可以考慮將輪播圖變為背景的輪換，這時候輪播焦點也就可以不使用了，相信你的部落格首頁或者產品首頁使用背景輪換，效果會非常不錯的。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程