手把手教你用純css3實現(xiàn)輪播圖效果實例
我要評論首先先看demo吧，點擊查看demo
一、隨便說幾句
css3動畫效果的強(qiáng)大不言而喻，自它出現(xiàn)一直熱度不減，它與js動畫的優(yōu)劣也一直成為前端界爭論的話題，不可置疑的是css3動畫的出現(xiàn)在一定程度上降低了動畫效果的實現(xiàn)難度，利于前端的學(xué)習(xí)，其精簡的代碼量把我們從煩人的js調(diào)試中解放出來，當(dāng)然css的動畫效果有其局限性，我們不能只用css3模擬出全部的就是動畫，另外就是瀏覽器的兼容性問題。我們這次用css3實現(xiàn)一個輪播圖效果，體驗一下css3的強(qiáng)大。首先說明我們可次只實現(xiàn)了自動輪播，效果也是最常見的淡入淡出，并未實現(xiàn)點擊輪換效果，至少在我目前水平來看，自動輪播與點擊輪換兩者純css3只能選其一，如果可以同時實現(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，因為這樣才有可能用純的css實現(xiàn)響應(yīng)式，另外背景圖為了在響應(yīng)式中看清全貌，必然使用background-size:100%，另外就是高度問題了，顯然slider-container必需是和li的高度一致，因為響應(yīng)式中必然這個高度不能固定死，所以使用height屬性顯然不行，padding屬性可以解決這個問題，一是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è)計動畫
淡入淡出效果肯定是使用opacity，首先整體來看所有圖片的淡入淡出都是同一個動畫，只是時間不一樣而已，這肯定是利用animation-delay來控制，動畫無限輪換肯定使用animation-iteration-count: infinite，我們這次5張圖片，整個動畫分為圖片停留和淡入淡出兩個效果，用下圖表示，箭頭表示淡入淡出過程。
因為css3中沒有一個屬性是規(guī)定兩次動畫播放的時間間隔，所以我們必須把其他圖片淡入淡出時該圖片的效果寫進(jìn)動畫里，顯然這時候是opacity:0；我們?yōu)榱藢憚赢嫷姆奖?，動畫使用線性函數(shù)，也就是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;
}
這個時候我們的輪播圖可以動了
四、添加輪播焦點
添加輪播焦點當(dāng)然不是為了點擊，而是告訴訪問者這里有幾張圖片和目前圖片的位置，至少以我個人而言，輪播焦點很重要，因為如果我不知道輪播的圖片有幾張，我又沒有辦法點擊，我就會非常不安，感覺自己沒有看到整個網(wǎng)頁的全貌。所以我們還是添加一下輪播焦點。首先非常明確的這個仍然可以使用上面的動畫，另外布局肯定使用position：absolute，另外很明顯焦點我們必須寫兩次，一次是當(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代碼梳理個人認(rèn)為首先必須添加必要的注釋，將css代碼分區(qū)，另外就是盡量減少后期修改需要修改的地方，這個主要是代碼重構(gòu)的問題，這個問題我已經(jīng)在編寫代碼的時候考慮到了，所以主要任務(wù)就是添加注釋和告訴維護(hù)者代碼最常修改的地方，我們遵循最常修改的代碼放到最后的原則。
我們來分析一下我們的代碼如果給別人用可能需要修改的地方，首先肯定是圖片路徑，所以我們把這個樣式放在最后，然后是圖片高度，輪播焦點的顏色，動畫時間的設(shè)置（這里還涉及圖片個數(shù)），輪播焦點的位置，當(dāng)然輪播焦點大小也可能修改。重構(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è)置輪播焦點的位置*/
.focus-container{
bottom:2%;
}
/*設(shè)置當(dāng)前圖片焦點的顏色*/
.focus-item{
background:#51B1D9;
}
/*設(shè)置動畫，請根據(jù)實際需要修改秒數(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ù)斷點修改路徑*/
.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)式及時修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}
六、最后扯兩句
這種css3實現(xiàn)的輪播圖，缺點也是不言而喻，點擊輪換和自動輪換兩者只能選其一，不過自動輪換可以用在手機(jī)端，這是一個不錯的選擇，另外，現(xiàn)在的網(wǎng)站大都是通欄設(shè)計，網(wǎng)頁文字很少，尤其是網(wǎng)站首頁更是如此，有時候比的不是網(wǎng)站設(shè)計的優(yōu)劣，反而是誰選的圖片好看，誰就有可能受到青睞，這種情況我們其實可以考慮將輪播圖變?yōu)楸尘暗妮啌Q，這時候輪播焦點也就可以不使用了，相信你的博客首頁或者產(chǎn)品首頁使用背景輪換，效果會非常不錯的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼
這是一款基于CSS3實現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼。畫面中心的幻燈片點擊左右切換按鈕、或底部的焦點即可實現(xiàn)畫面的切換。且圖片平滑輪播切換過程中伴2019-12-04
今天我們學(xué)習(xí)如何使用CSS創(chuàng)建一個炫酷的圖片輪播組件。感興趣的朋友跟隨小編一起看看吧2019-05-24
html5+css3制作全屏響應(yīng)式圖片滑動輪播預(yù)覽特效源碼
html5 css3制作全屏響應(yīng)式圖片輪播布局，按鈕控制圖片水平滑動預(yù)覽查看，圖片支持鼠標(biāo)懸停文字動畫展示特效。有需要的朋友可以直接下載使用2018-08-15
html5+css3實現(xiàn)的3D傾斜圖片輪播切換特效源碼
這是一款基于html5+css3實現(xiàn)的3D傾斜圖片輪播切換特效源碼。各個海報圖片可定時切換，也可點擊右下角的next按鈕切換顯示下一張圖片。右上角的滑塊可調(diào)整顯示圖片的傾斜角度2018-01-08
這是一款js和CSS3的3D輪播圖特效。6種輪播圖效果，點擊按鈕即可實現(xiàn)3D翻轉(zhuǎn)輪播特效，歡迎下載2017-08-08- 圖片輪播效果在各大網(wǎng)站都能用到，本文給大家分享通過純css3制作輪播效果圖的思路，感興趣的朋友一起看看吧2016-08-25
基于jquery+css3實現(xiàn)的通欄響應(yīng)式圖片輪播動畫特效源碼
基于jquery+css3實現(xiàn)的通欄響應(yīng)式圖片輪播動畫特效源碼是一段實用的產(chǎn)品展示代碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼，需要的朋友們可以前來下載使用2014-10-23
今天給大家分享一款使用純 CSS 實現(xiàn)的圖片輪播/幻燈片，切換方式為淡入淡出效果，感興趣的朋友下載源碼吧2020-07-15
