使用html5+css3來實現(xiàn)slider切換效果告別javascript+css
發(fā)布時間:2013-01-08 09:03:48 作者:佚名
我要評論

提到slider,過去一直都是用css+js來配合實現(xiàn)相關(guān)的切換效果。聽過大家一直討論使用html5+css3的實現(xiàn)方式,自己卻一直沒有動手實現(xiàn)過。好吧,這次我有時間來玩下css3了,感興趣的朋友可以了解下哦
好吧,上次說要趕緊的補上幾篇文章,結(jié)果淡定的失約了。又是近一個月才發(fā)一篇,真是讓人郁悶。發(fā)現(xiàn)最近總是抽不出時間了,基本都是一個項目接一個項目的安排,自己不是在空閑的時候找不到合適的話題,就是在有糾結(jié)話題的時候抽不出時間了。所以我決定一段時間內(nèi)先把自己糾結(jié)過的問題先歸納下知識點,等空閑的時候在一個一個深入研究,然后再整理成文章后分享出來。
開始進(jìn)入正題,提到slider,過去一直都是用css+js來配合實現(xiàn)相關(guān)的切換效果。聽過大家一直討論使用html5+css3的實現(xiàn)方式,自己卻一直沒有動手實現(xiàn)過。好吧,這次我有時間來玩下css3了。其實,我也是被微博上的一條消息給吸引過來的,看到別人實現(xiàn)的效果很贊,然后自己就有了動手做一把的沖動。
一、效果圖
跟過去用js來實現(xiàn)的效果看上去差不了太多,但是整體感覺很優(yōu)雅。好吧,css3的強大之處在于,我寫了很少的代碼,就實現(xiàn)了比較復(fù)雜的效果。但是這個示例也有不太完美的地方,就是在兩張圖片切換的時候,如果中間間隔有圖片,那么在css3動畫的執(zhí)行過程中還是會看到,比較不給力。不過想想,這可是純css3來實現(xiàn)的效果啊,用js來實現(xiàn)的復(fù)雜的html結(jié)構(gòu)變動在這里可看不到,所以上面的效果很難簡單用css3來實現(xiàn)。
二、html結(jié)構(gòu)
<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 class="inner">
<article>
<div class="info">
<h1>Title1</h1>
<a href="#">Description1</a>
</div>
<img src="img/pic1.png"/>
</article>
<article>
<div class="info">
<h1>Title2</h1>
<a href="#">Description2</a>
</div>
<img src="img/pic2.png"/>
</article>
<article>
<div class="info">
<h1>Title3</h1>
<a href="#">Description3</a>
</div>
<img src="img/pic3.png"/>
</article>
<article>
<div class="info">
<h1>Title4</h1>
<a href="#">Description4</a>
</div>
<img src="img/pic4.png"/>
</article>
<article>
<div class="info">
<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),其中包含了一個input radio組,你可以在這里它看做一個中樞,本實例中它起到了很關(guān)鍵的作用(這也是為什么我在示例中不愿將它隱藏起來,真正的英雄不應(yīng)該是幕后的英雄)。
下面的sliders中包含了需要展現(xiàn)的images,這里好像是一個滑動門的效果,通過控制inner的margin-left來展現(xiàn)不同的image。
controls是圖片左右兩邊的切換箭頭,先不要著急為什么要設(shè)計5個,看上去只要兩個就可以了啊,提醒下,我們本例中絕不使用js來實現(xiàn)切換。
最后的active是圖片下面的點擊小按鈕,可以通過點擊直接選擇要瀏覽的圖片,你也可以豐富里面的結(jié)構(gòu)來設(shè)計一個縮略圖的效果。
三、css樣式表
@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ù)雜,可是它真的實現(xiàn)了非常炫的效果,而且我寫完的時候也被css3的巨大魔力折服了。。。
這里面前半部分的代碼主要用來設(shè)計slider的結(jié)構(gòu),包括一些圓角、陰影方面的美化設(shè)計。后半部分主要是一些動畫效果,來實現(xiàn)一些切換圖片或者是控制按鈕切換時候的動態(tài)效果。但是,最主要的是最下面的css3選擇器的使用,通過它真正實現(xiàn)了圖片切換的功能。我真的認(rèn)為選擇器在示例里起到了非常非常重要的作用,因為這是我過去學(xué)習(xí)css3所忽略的知識。一直覺得css3強大的是圓角、陰影,是變形、動畫,但是這段代碼真的告訴我們選擇器在css3中有多么重要。在一些復(fù)雜的邏輯中,使用這些css3選擇器可以實現(xiàn)令人無法想象的效果。
四、slider實現(xiàn)的原理
第一次看完上面的代碼的時候,你肯定跟我當(dāng)初一樣,不相信這樣的代碼可以實現(xiàn)slider的效果。
好吧,我來分析下實現(xiàn)的原理吧。
我在上文中說過,最上面的那個radio組很重要,是slider實現(xiàn)的樞紐。沒錯,它真的是。
要實現(xiàn)一個slider,無非要實現(xiàn)兩種切換,就是點擊控制按鈕的時候,圖片切換;同時,圖片切換的時候,保證所有的控制按鈕正確顯示。
本例中我們使用label來作為控制按鈕,article包含圖片,而inner作為圖片的容器。
簡單的想,label和article怎么也建立不起來聯(lián)系,label的狀態(tài)信息很難反映到article的選擇上去。除非有個東西可以把label的切換狀態(tài)記錄下來,然后通過某種手段來選擇相應(yīng)次序的圖片來顯示。
好吧,現(xiàn)在,你明白了為什么那個radio組是實現(xiàn)slider的關(guān)鍵了吧。對,它的出現(xiàn)就是為了記錄label的點擊狀態(tài)。
我們通過label的for屬性將它與對應(yīng)的radio對應(yīng)起來,當(dāng)label點擊的時候,相應(yīng)的radio就變?yōu)榱薱hecked的狀態(tài)。然后通過強大的css3選擇器將inner向左移動,讓對應(yīng)的圖片顯示出來。當(dāng)然,對應(yīng)的左右選擇按鈕也是通過選擇器來顯示的。同樣的道理,左右按鈕點擊時,下方5個選擇按鈕的狀態(tài)也是這樣實現(xiàn)的。
上面的實現(xiàn)原理比較簡單吧,其實只要可以記錄下控制按鈕的點擊狀態(tài),通過選擇器就可以實現(xiàn)slider的效果。
不僅僅只有radio組可以,a:hover也可以按照這樣的思路來實現(xiàn)a在hover的時候?qū)崿F(xiàn)圖片切換。當(dāng)然還有其他多種實現(xiàn)方式,只要你明白實現(xiàn)的原理。
五、總結(jié)
其實css3真的很好玩,很多效果,在css3中,只有想不到,沒有做不到。有時候真的發(fā)現(xiàn),寫css3是需要一點點小聰明的,有時候一些精妙的實現(xiàn)方式真的讓人贊不絕口。
好吧,作為一個小實踐,這個示例給我的收獲還是很多的,尤其是強大的選擇器,讓我汗顏了,過去太忽視了。。。
不連續(xù)圖片切換的問題,我還要考慮考慮,看來必須要使用一點js來輔助了。
好吧,有結(jié)果了再分享出來。
開始進(jìn)入正題,提到slider,過去一直都是用css+js來配合實現(xiàn)相關(guān)的切換效果。聽過大家一直討論使用html5+css3的實現(xiàn)方式,自己卻一直沒有動手實現(xiàn)過。好吧,這次我有時間來玩下css3了。其實,我也是被微博上的一條消息給吸引過來的,看到別人實現(xiàn)的效果很贊,然后自己就有了動手做一把的沖動。
一、效果圖

跟過去用js來實現(xiàn)的效果看上去差不了太多,但是整體感覺很優(yōu)雅。好吧,css3的強大之處在于,我寫了很少的代碼,就實現(xiàn)了比較復(fù)雜的效果。但是這個示例也有不太完美的地方,就是在兩張圖片切換的時候,如果中間間隔有圖片,那么在css3動畫的執(zhí)行過程中還是會看到,比較不給力。不過想想,這可是純css3來實現(xiàn)的效果啊,用js來實現(xiàn)的復(fù)雜的html結(jié)構(gòu)變動在這里可看不到,所以上面的效果很難簡單用css3來實現(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 class="inner">
<article>
<div class="info">
<h1>Title1</h1>
<a href="#">Description1</a>
</div>
<img src="img/pic1.png"/>
</article>
<article>
<div class="info">
<h1>Title2</h1>
<a href="#">Description2</a>
</div>
<img src="img/pic2.png"/>
</article>
<article>
<div class="info">
<h1>Title3</h1>
<a href="#">Description3</a>
</div>
<img src="img/pic3.png"/>
</article>
<article>
<div class="info">
<h1>Title4</h1>
<a href="#">Description4</a>
</div>
<img src="img/pic4.png"/>
</article>
<article>
<div class="info">
<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),其中包含了一個input radio組,你可以在這里它看做一個中樞,本實例中它起到了很關(guān)鍵的作用(這也是為什么我在示例中不愿將它隱藏起來,真正的英雄不應(yīng)該是幕后的英雄)。
下面的sliders中包含了需要展現(xiàn)的images,這里好像是一個滑動門的效果,通過控制inner的margin-left來展現(xiàn)不同的image。
controls是圖片左右兩邊的切換箭頭,先不要著急為什么要設(shè)計5個,看上去只要兩個就可以了啊,提醒下,我們本例中絕不使用js來實現(xiàn)切換。
最后的active是圖片下面的點擊小按鈕,可以通過點擊直接選擇要瀏覽的圖片,你也可以豐富里面的結(jié)構(gòu)來設(shè)計一個縮略圖的效果。
三、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ù)雜,可是它真的實現(xiàn)了非常炫的效果,而且我寫完的時候也被css3的巨大魔力折服了。。。
這里面前半部分的代碼主要用來設(shè)計slider的結(jié)構(gòu),包括一些圓角、陰影方面的美化設(shè)計。后半部分主要是一些動畫效果,來實現(xiàn)一些切換圖片或者是控制按鈕切換時候的動態(tài)效果。但是,最主要的是最下面的css3選擇器的使用,通過它真正實現(xiàn)了圖片切換的功能。我真的認(rèn)為選擇器在示例里起到了非常非常重要的作用,因為這是我過去學(xué)習(xí)css3所忽略的知識。一直覺得css3強大的是圓角、陰影,是變形、動畫,但是這段代碼真的告訴我們選擇器在css3中有多么重要。在一些復(fù)雜的邏輯中,使用這些css3選擇器可以實現(xiàn)令人無法想象的效果。
四、slider實現(xiàn)的原理
第一次看完上面的代碼的時候,你肯定跟我當(dāng)初一樣,不相信這樣的代碼可以實現(xiàn)slider的效果。
好吧,我來分析下實現(xiàn)的原理吧。
我在上文中說過,最上面的那個radio組很重要,是slider實現(xiàn)的樞紐。沒錯,它真的是。
要實現(xiàn)一個slider,無非要實現(xiàn)兩種切換,就是點擊控制按鈕的時候,圖片切換;同時,圖片切換的時候,保證所有的控制按鈕正確顯示。
本例中我們使用label來作為控制按鈕,article包含圖片,而inner作為圖片的容器。
簡單的想,label和article怎么也建立不起來聯(lián)系,label的狀態(tài)信息很難反映到article的選擇上去。除非有個東西可以把label的切換狀態(tài)記錄下來,然后通過某種手段來選擇相應(yīng)次序的圖片來顯示。
好吧,現(xiàn)在,你明白了為什么那個radio組是實現(xiàn)slider的關(guān)鍵了吧。對,它的出現(xiàn)就是為了記錄label的點擊狀態(tài)。
我們通過label的for屬性將它與對應(yīng)的radio對應(yīng)起來,當(dāng)label點擊的時候,相應(yīng)的radio就變?yōu)榱薱hecked的狀態(tài)。然后通過強大的css3選擇器將inner向左移動,讓對應(yīng)的圖片顯示出來。當(dāng)然,對應(yīng)的左右選擇按鈕也是通過選擇器來顯示的。同樣的道理,左右按鈕點擊時,下方5個選擇按鈕的狀態(tài)也是這樣實現(xiàn)的。
上面的實現(xiàn)原理比較簡單吧,其實只要可以記錄下控制按鈕的點擊狀態(tài),通過選擇器就可以實現(xiàn)slider的效果。
不僅僅只有radio組可以,a:hover也可以按照這樣的思路來實現(xiàn)a在hover的時候?qū)崿F(xiàn)圖片切換。當(dāng)然還有其他多種實現(xiàn)方式,只要你明白實現(xiàn)的原理。
五、總結(jié)
其實css3真的很好玩,很多效果,在css3中,只有想不到,沒有做不到。有時候真的發(fā)現(xiàn),寫css3是需要一點點小聰明的,有時候一些精妙的實現(xiàn)方式真的讓人贊不絕口。
好吧,作為一個小實踐,這個示例給我的收獲還是很多的,尤其是強大的選擇器,讓我汗顏了,過去太忽視了。。。
不連續(xù)圖片切換的問題,我還要考慮考慮,看來必須要使用一點js來輔助了。
好吧,有結(jié)果了再分享出來。
相關(guān)文章
JavaScript應(yīng)用程序設(shè)計:使用Node HTML5和現(xiàn)代JavaScript類庫打造穩(wěn)健
本書帶領(lǐng)專業(yè)JavaScript開發(fā)人員領(lǐng)略創(chuàng)**應(yīng)用程序的所有必要步驟,介紹用現(xiàn)實示例應(yīng)用程序幫助你掌握相關(guān)的概念。學(xué)習(xí)如何創(chuàng)建JavaScript應(yīng)用程序,進(jìn)而同提供更好的用戶體2016-11-03CSS插件工具箱-使用JAVASCRIPT和HTML5編寫的100個CSS動態(tài)網(wǎng)站插件 PDF
本書包含了100個可用于創(chuàng)建動態(tài)Web內(nèi)容的現(xiàn)成CSS插件。所有這些插件都配有HTML例子和顯示最終效果的屏幕快照。2014-07-31使用純css禁用html中a標(biāo)簽無需JavaScript
時至今日,依然沒有找到使用純css禁用a標(biāo)簽的辦法,難道真的必須要借助JavaScript嗎?其實不然,方法有很多,下面為大家介紹下通過js、jquey以及css來實現(xiàn)禁用a標(biāo)簽2014-05-13使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果
這篇文章主要介紹了使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果,需要的朋友可以參考下2014-04-10使用HTML,CSS,JavaScript開發(fā)Android應(yīng)用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已經(jīng)擁有所需的工具開發(fā)Android應(yīng)用程序。本動手本書展示了如何使用這些開源web標(biāo)準(zhǔn)設(shè)計和建造,可適應(yīng)任何Android設(shè)備的應(yīng)用程序 -2011-06-17如何正確地在XHTML文檔中使用JavaScript和CSS
可擴展性超文本標(biāo)記語言XHTML1.0第2版定義XHTML可以將HTML4.0轉(zhuǎn)換為XML1.0格式。2009-05-19- 這篇文章主要介紹了在HTML中使用JavaScript實例代碼,需要的朋友可以參考下2017-08-03