使用html5+css3來(lái)實(shí)現(xiàn)slider切換效果告別javascript+c

2020-03-22 19:38:58

字體：大中小

供稿：網(wǎng)友

HTML 使用html5+css3來(lái)實(shí)現(xiàn)slider切換效果告別javascript+css
好吧，上次說(shuō)要趕緊的補(bǔ)上幾篇文章，結(jié)果淡定的失約了。又是近一個(gè)月才發(fā)一篇，真是讓人郁悶。發(fā)現(xiàn)最近總是抽不出時(shí)間了，基本都是一個(gè)項(xiàng)目接一個(gè)項(xiàng)目的安排，自己不是在空閑的時(shí)候找不到合適的話題，就是在有糾結(jié)話題的時(shí)候抽不出時(shí)間了。所以我決定一段時(shí)間內(nèi)先把自己糾結(jié)過(guò)的問(wèn)題先歸納下知識(shí)點(diǎn)，等空閑的時(shí)候在一個(gè)一個(gè)深入研究，然后再整理成文章后分享出來(lái)。

開(kāi)始進(jìn)入正題，提到slider，過(guò)去一直都是用css+js來(lái)配合實(shí)現(xiàn)相關(guān)的切換效果。聽(tīng)過(guò)大家一直討論使用html5+css3的實(shí)現(xiàn)方式，自己卻一直沒(méi)有動(dòng)手實(shí)現(xiàn)過(guò)。好吧，這次我有時(shí)間來(lái)玩下css3了。其實(shí)，我也是被微博上的一條消息給吸引過(guò)來(lái)的，看到別人實(shí)現(xiàn)的效果很贊，然后自己就有了動(dòng)手做一把的沖動(dòng)。
一、效果圖

跟過(guò)去用js來(lái)實(shí)現(xiàn)的效果看上去差不了太多，但是整體感覺(jué)很優(yōu)雅。好吧，css3的強(qiáng)大之處在于，我寫(xiě)了很少的代碼，就實(shí)現(xiàn)了比較復(fù)雜的效果。但是這個(gè)示例也有不太完美的地方，就是在兩張圖片切換的時(shí)候，如果中間間隔有圖片，那么在css3動(dòng)畫(huà)的執(zhí)行過(guò)程中還是會(huì)看到，比較不給力。不過(guò)想想，這可是純css3來(lái)實(shí)現(xiàn)的效果啊，用js來(lái)實(shí)現(xiàn)的復(fù)雜的html結(jié)構(gòu)變動(dòng)在這里可看不到，所以上面的效果很難簡(jiǎn)單用css3來(lái)實(shí)現(xiàn)。
二、html結(jié)構(gòu)

復(fù)制代碼代碼如下:
div id="bd"
input checked type="radio" name="slider" id="slider1"
input type="radio" name="slider" id="slider2"
input type="radio" name="slider" id="slider3"
input type="radio" name="slider" id="slider4"
input type="radio" name="slider" id="slider5"
div id="sliders"
div id="overflow"
div
article
div
h1 Title1 /h1
a href="#" Description1 /a
/div
img src="img/pic1.png"/
/article
article
div
h1 Title2 /h1
a href="#" Description2 /a
/div
img src="img/pic2.png"/
/article
article
div
h1 Title3 /h1
a href="#" Description3 /a
/div
img src="img/pic3.png"/
/article
article
div
h1 Title4 /h1
a href="#" Description4 /a
/div
img src="img/pic4.png"/
/article
article
div
h1 Title5 /h1
a href="#" Description5 /a
/div
img src="img/pic5.png"/
/article
/div
/div
/div
div id="controls"
label for="slider1" /label
label for="slider2" /label
label for="slider3" /label
label for="slider4" /label
label for="slider5" /label
/div
div id="active"
label for="slider1" /label
label for="slider2" /label
label for="slider3" /label
label for="slider4" /label
label for="slider5" /label
/div
/div

上面的代碼是主要的html結(jié)構(gòu)，其中包含了一個(gè)input radio組，你可以在這里它看做一個(gè)中樞，本實(shí)例中它起到了很關(guān)鍵的作用（這也是為什么我在示例中不愿將它隱藏起來(lái)，真正的英雄不應(yīng)該是幕后的英雄）。
下面的sliders中包含了需要展現(xiàn)的images，這里好像是一個(gè)滑動(dòng)門(mén)的效果，通過(guò)控制inner的margin-left來(lái)展現(xiàn)不同的image。

controls是圖片左右兩邊的切換箭頭，先不要著急為什么要設(shè)計(jì)5個(gè)，看上去只要兩個(gè)就可以了啊，提醒下，我們本例中絕不使用js來(lái)實(shí)現(xiàn)切換。
最后的active是圖片下面的點(diǎn)擊小按鈕，可以通過(guò)點(diǎn)擊直接選擇要瀏覽的圖片，你也可以豐富里面的結(jié)構(gòu)來(lái)設(shè)計(jì)一個(gè)縮略圖的效果。
三、css樣式表

復(fù)制代碼代碼如下:
@charset utf-8;
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin: 100px auto;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #fff;
}
#overflow{
width: 100%;
overflow: hidden;
}
#sliders .inner{
width: 500%;
transiton: all 1s linear;
-webkit-transition: all 1s linear;
}
#sliders article{
float: left;
width: 20%;
}
#sliders article .info{
position: absolute;
opacity: 0;
padding: 30px;
color: #666;
font-family: Arial;
transition: opacity 0.1s ease-out;
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.1s ease-out;
}
#sliders article .info h1{
font-size: 22px;
font-weight: bold;
margin: 0 0 5px;
}
#sliders article .info a{
color: #666;
text-decoration: none;
}
/* module: controls */
#controls{
height: 50px;
width: 100%;
margin-top: -25%;
}
#controls label{
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
cursor: pointer;
}
#controls label:hover{
opacity: 1;
}
/* module: active */
#active{
width: 100%;
margin-top: 23%;
text-align: center;
}
#active label{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background: #bbb;
border-color: #777;
}
#active label:hover{
background: #ccc;
}
/* input checked change style */
#slider1:checked ~ #active label:nth-child(1),
#slider2:checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5),
#slider2:checked ~ #controls label:nth-child(1),
#slider3:checked ~ #controls label:nth-child(2),
#slider4:checked ~ #controls label:nth-child(3),
#slider5:checked ~ #controls label:nth-child(4){
display: block;
float: left;
background: url(../img/prev.png) no-repeat;
margin-left: -70px;
}
#slider1:checked ~ #controls label:nth-child(2),
#slider2:checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5),
#slider5:checked ~ #controls label:nth-child(1){
display: block;
float: right;
background: url(../img/next.png) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders article:nth-child(1) .info,
#slider2:checked ~ #sliders article:nth-child(2) .info,
#slider3:checked ~ #sliders article:nth-child(3) .info,
#slider4:checked ~ #sliders article:nth-child(4) .info,
#slider5:checked ~ #sliders article:nth-child(5) .info{
opacity: 1;
transition: all 0.6s ease-out 1s;
-webkit-transition: all 0.6s ease-out 1s;
}
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
margin-left: -100%;
}
#slider3:checked ~ #sliders .inner{
margin-left: -200%;
}
#slider4:checked ~ #sliders .inner{
margin-left: -300%;
}
#slider5:checked ~ #sliders .inner{
margin-left: -400%;
}

好吧，我承認(rèn)上面的css代碼真的比較多，比較復(fù)雜，可是它真的實(shí)現(xiàn)了非常炫的效果，而且我寫(xiě)完的時(shí)候也被css3的巨大魔力折服了。。。
這里面前半部分的代碼主要用來(lái)設(shè)計(jì)slider的結(jié)構(gòu)，包括一些圓角、陰影方面的美化設(shè)計(jì)。后半部分主要是一些動(dòng)畫(huà)效果，來(lái)實(shí)現(xiàn)一些切換圖片或者是控制按鈕切換時(shí)候的動(dòng)態(tài)效果。但是，最主要的是最下面的css3選擇器的使用，通過(guò)它真正實(shí)現(xiàn)了圖片切換的功能。我真的認(rèn)為選擇器在示例里起到了非常非常重要的作用，因?yàn)檫@是我過(guò)去學(xué)習(xí)css3所忽略的知識(shí)。一直覺(jué)得css3強(qiáng)大的是圓角、陰影，是變形、動(dòng)畫(huà)，但是這段代碼真的告訴我們選擇器在css3中有多么重要。在一些復(fù)雜的邏輯中，使用這些css3選擇器可以實(shí)現(xiàn)令人無(wú)法想象的效果。
四、slider實(shí)現(xiàn)的原理
第一次看完上面的代碼的時(shí)候，你肯定跟我當(dāng)初一樣，不相信這樣的代碼可以實(shí)現(xiàn)slider的效果。
好吧，我來(lái)分析下實(shí)現(xiàn)的原理吧。
我在上文中說(shuō)過(guò)，最上面的那個(gè)radio組很重要，是slider實(shí)現(xiàn)的樞紐。沒(méi)錯(cuò)，它真的是。
要實(shí)現(xiàn)一個(gè)slider，無(wú)非要實(shí)現(xiàn)兩種切換，就是點(diǎn)擊控制按鈕的時(shí)候，圖片切換；同時(shí)，圖片切換的時(shí)候，保證所有的控制按鈕正確顯示。
本例中我們使用label來(lái)作為控制按鈕，article包含圖片，而inner作為圖片的容器。
簡(jiǎn)單的想，label和article怎么也建立不起來(lái)聯(lián)系，label的狀態(tài)信息很難反映到article的選擇上去。除非有個(gè)東西可以把label的切換狀態(tài)記錄下來(lái)，然后通過(guò)某種手段來(lái)選擇相應(yīng)次序的圖片來(lái)顯示。
好吧，現(xiàn)在，你明白了為什么那個(gè)radio組是實(shí)現(xiàn)slider的關(guān)鍵了吧。對(duì)，它的出現(xiàn)就是為了記錄label的點(diǎn)擊狀態(tài)。
我們通過(guò)label的for屬性將它與對(duì)應(yīng)的radio對(duì)應(yīng)起來(lái)，當(dāng)label點(diǎn)擊的時(shí)候，相應(yīng)的radio就變?yōu)榱薱hecked的狀態(tài)。然后通過(guò)強(qiáng)大的css3選擇器將inner向左移動(dòng)，讓對(duì)應(yīng)的圖片顯示出來(lái)。當(dāng)然，對(duì)應(yīng)的左右選擇按鈕也是通過(guò)選擇器來(lái)顯示的。同樣的道理，左右按鈕點(diǎn)擊時(shí)，下方5個(gè)選擇按鈕的狀態(tài)也是這樣實(shí)現(xiàn)的。
上面的實(shí)現(xiàn)原理比較簡(jiǎn)單吧，其實(shí)只要可以記錄下控制按鈕的點(diǎn)擊狀態(tài)，通過(guò)選擇器就可以實(shí)現(xiàn)slider的效果。
不僅僅只有radio組可以，a:hover也可以按照這樣的思路來(lái)實(shí)現(xiàn)a在hover的時(shí)候?qū)崿F(xiàn)圖片切換。當(dāng)然還有其他多種實(shí)現(xiàn)方式，只要你明白實(shí)現(xiàn)的原理。
五、總結(jié)
其實(shí)css3真的很好玩，很多效果，在css3中，只有想不到，沒(méi)有做不到。有時(shí)候真的發(fā)現(xiàn)，寫(xiě)css3是需要一點(diǎn)點(diǎn)小聰明的，有時(shí)候一些精妙的實(shí)現(xiàn)方式真的讓人贊不絕口。
好吧，作為一個(gè)小實(shí)踐，這個(gè)示例給我的收獲還是很多的，尤其是強(qiáng)大的選擇器，讓我汗顏了，過(guò)去太忽視了。。。
不連續(xù)圖片切換的問(wèn)題，我還要考慮考慮，看來(lái)必須要使用一點(diǎn)js來(lái)輔助了。
好吧，有結(jié)果了再分享出來(lái)。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：Dreamweaver中CSS屬性速記

下一篇：使用純css禁用html中a標(biāo)簽無(wú)需JavaScript