CSS 實現「前進/後退」按鈕的功能
前言：通常的輪播效果中，能夠經過序號來進行圖片切換。同時，還有兩個控制按鈕「前進/後退」。
在js環境下，咱們會先保存一個圖片編號變量，而後經過點擊事件來修改這個編號，從而修改要顯示的圖片。
在純CSS環境中，咱們一般只能使用點擊序號來切換圖片，沒法實現經過變量來切換要顯示的圖片。接下來將介紹如何使用CSS來解決切換按鈕的問題。
1.首先，經過input標籤和僞類選擇符「+」和「~」，能夠實現點擊單選按鈕來切換圖片的功能。同時還會使用label標籤來綁定對應的input標籤。
例如：css
1 <style> 2 input:checked + label { 3 background-color: #000000; 4 } 5 6 input:checked ~ .box { 7 background-color: #fff; 8 } 9 </style> 10 11 <body> 12 <input type="radio" name="input" id="i1"> 13 <label for="i1"></label> 14 <input type="radio" name="input" id="i2"> 15 <label for="i2"></label> 16 <input type="radio" name="input" id="i3"> 17 <label for="i3"></label> 18 <div class="box"></div> 19 </body>
2.在這個基礎上，能夠在擴展一下label的功能。讓label綁定上一個和下一個input。
例如：html
1 <style> 2 input:nth-of-type(2):checked ~ label { 3 background-color: #000000; 4 } 5 </style> 6 7 <body> 8 <input type="radio" name="input" id="i1"> 9 <input type="radio" name="input" id="i2"> 10 <input type="radio" name="input" id="i3"> 11 12 <label for="i1"></label> 13 <label for="i3"></label> 14 </body>
在這個例子裏面，第二個input的後面有兩個label，分別綁定了input 1和input 2。也就是一個input綁定兩個label。這樣就能夠實現一個簡單的「前進/後退」切換的功能。web
根據這個結構，能夠繼續擴展。實現多個input都綁定兩個label。ide
如下使用6個input的例子：佈局
1 <input type="radio" name="inputs" id="inputs_1" class="inputs" title="" checked> 2 <input type="radio" name="inputs" id="inputs_2" class="inputs" title=""> 3 <input type="radio" name="inputs" id="inputs_3" class="inputs" title=""> 4 <input type="radio" name="inputs" id="inputs_4" class="inputs" title=""> 5 <input type="radio" name="inputs" id="inputs_5" class="inputs" title=""> 6 <input type="radio" name="inputs" id="inputs_6" class="inputs" title=""> 7 8 <!--inputs 1--> 9 <label for="inputs_6" class="link prev"><</label> 10 <label for="inputs_2" class="link next">></label> 11 <!--inputs 2--> 12 <label for="inputs_1" class="link prev"><</label> 13 <label for="inputs_3" class="link next">></label> 14 <!--inputs 3--> 15 <label for="inputs_2" class="link prev"><</label> 16 <label for="inputs_4" class="link next">></label> 17 <!--inputs 4--> 18 <label for="inputs_3" class="link prev"><</label> 19 <label for="inputs_5" class="link next">></label> 20 <!--inputs 5--> 21 <label for="inputs_4" class="link prev"><</label> 22 <label for="inputs_6" class="link next">></label> 23 <!--inputs 6--> 24 <label for="inputs_5" class="link prev"><</label> 25 <label for="inputs_1" class="link next">></label>
3.在這個結構裏面每一對的label就至關於在輪播效果中的「前進/後退」按鈕。先看一下具體原理演示的效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 /*初始設置*/ 8 .tips { 9 font-size: 26px; 10 text-align: center; 11 } 12 13 #big-box { 14 position: relative; 15 width: 800px; 16 height: 340px; 17 margin: 20px auto; 18 border: 1px solid #000; 19 text-align: center; 20 } 21 22 .ip { 23 width: 20px; 24 height: 20px; 25 margin: 0 10px; 26 } 27 28 .lb { 29 display: block; 30 width: 80px; 31 height: 42px; 32 margin-top: 6px; 33 font-size: 36px; 34 line-height: 42px; 35 background-color: #6de3ff; 36 opacity: .25; 37 } 38 39 .lb:nth-of-type(1) { 40 /*用於避免右浮動的lb被擠到下一行，高度最小爲1，若是爲0會破壞後面的佈局；*/ 41 height: 1px; 42 visibility: hidden; 43 } 44 45 .lb:nth-of-type(even) { 46 float: right; 47 } 48 49 #show-box { 50 width: 560px; 51 height: 260px; 52 margin: -270px auto 0; 53 background: -webkit-linear-gradient(top, #6de3ff, #6de3ff) 0 0/100% no-repeat, 54 -webkit-linear-gradient(top, #7aff90, #7aff90) 0 0/100% no-repeat, 55 -webkit-linear-gradient(top, #ff7251, #ff7251) 0 0/100% no-repeat, 56 -webkit-linear-gradient(top, #fffc75, #fffc75) 0 0/100% no-repeat, 57 -webkit-linear-gradient(top, #ff4b8a, #ff4b8a) 0 0/100% no-repeat, 58 -webkit-linear-gradient(top, #ffae51, #ffae51) 0 0/100% no-repeat; 59 -webkit-transition: all .5s ease-in-out; 60 -moz-transition: all .5s ease-in-out; 61 -ms-transition: all .5s ease-in-out; 62 -o-transition: all .5s ease-in-out; 63 transition: all .5s ease-in-out; 64 } 65 66 /*初始設置 end*/ 67 68 /*按鈕部分*/ 69 /*第1個*/ 70 .ip:nth-of-type(1):checked ~ .lb:nth-of-type(2), 71 .ip:nth-of-type(1):checked ~ .lb:nth-of-type(3) { 72 background-color: #ff4050; 73 opacity: 1; 74 visibility: visible; 75 } 76 77 /*第2個*/ 78 .ip:nth-of-type(2):checked ~ .lb:nth-of-type(4), 79 .ip:nth-of-type(2):checked ~ .lb:nth-of-type(5) { 80 background-color: #ff4050; 81 opacity: 1; 82 } 83 84 /*第3個*/ 85 .ip:nth-of-type(3):checked ~ .lb:nth-of-type(6), 86 .ip:nth-of-type(3):checked ~ .lb:nth-of-type(7) { 87 background-color: #ff4050; 88 opacity: 1; 89 } 90 91 /*第4個*/ 92 .ip:nth-of-type(4):checked ~ .lb:nth-of-type(8), 93 .ip:nth-of-type(4):checked ~ .lb:nth-of-type(9) { 94 background-color: #ff4050; 95 opacity: 1; 96 } 97 98 /*第5個*/ 99 .ip:nth-of-type(5):checked ~ .lb:nth-of-type(10), 100 .ip:nth-of-type(5):checked ~ .lb:nth-of-type(11) { 101 background-color: #ff4050; 102 opacity: 1; 103 } 104 105 /*第6個*/ 106 .ip:nth-of-type(6):checked ~ .lb:nth-of-type(12), 107 .ip:nth-of-type(6):checked ~ .lb:nth-of-type(13) { 108 background-color: #ff4050; 109 opacity: 1; 110 } 111 112 /*按鈕部分 end*/ 113 /*圖像部分*/ 114 .ip:nth-of-type(1):checked ~ #show-box { 115 background-position: 0, 560px, 1120px, 1680px, 2240px, 2800px; 116 } 117 118 .ip:nth-of-type(2):checked ~ #show-box { 119 background-position: -560px, 0, 560px, 1120px, 1680px, 2240px; 120 } 121 122 .ip:nth-of-type(3):checked ~ #show-box { 123 background-position: -1120px, -560px, 0, 560px, 1120px, 1680px; 124 } 125 126 .ip:nth-of-type(4):checked ~ #show-box { 127 background-position: -1680px, -1120px, -560px, 0, 560px, 1120px; 128 } 129 130 .ip:nth-of-type(5):checked ~ #show-box { 131 background-position: -2240px, -1680px, -1120px, -560px, 0, 560px; 132 } 133 134 .ip:nth-of-type(6):checked ~ #show-box { 135 background-position: -2800px, -2240px, -1680px, -1120px, -560px, 0; 136 } 137 138 /*圖像部分 end*/ 139 </style> 140 </head> 141 <body> 142 <p class="tips">原理：一個單選按鈕（input）對應一對「前進後退」按鈕（label）。<br>當單選按鈕被切換時，隱藏原來的按鈕組，顯示新的按鈕組。<br>藍色實際爲隱藏的按鈕組，紅色爲顯示的按鈕組。</p> 143 <div id="big-box"> 144 <!--連接部分--> 145 <input type="radio" name="ip" id="ip_1" class="ip" title="" checked> 146 <input type="radio" name="ip" id="ip_2" class="ip" title=""> 147 <input type="radio" name="ip" id="ip_3" class="ip" title=""> 148 <input type="radio" name="ip" id="ip_4" class="ip" title=""> 149 <input type="radio" name="ip" id="ip_5" class="ip" title=""> 150 <input type="radio" name="ip" id="ip_6" class="ip" title=""> 151 <!--連接部分 end--> 152 153 <!--按鈕部分--> 154 <!--第一個lb是爲了右邊的列表在右浮動的時候不會被擠到下一行； 155 因爲偶數lb使用了右浮，在下面的lb裏，從偶數開始綁定； 156 --> 157 <label class="lb"></label> 158 <!--ip 1--> 159 <label for="ip_2" class="lb">></label> 160 <label for="ip_6" class="lb"><</label> 161 <!--ip 2--> 162 <label for="ip_3" class="lb">></label> 163 <label for="ip_1" class="lb"><</label> 164 <!--ip 3--> 165 <label for="ip_4" class="lb">></label> 166 <label for="ip_2" class="lb"><</label> 167 <!--ip 4--> 168 <label for="ip_5" class="lb">></label> 169 <label for="ip_3" class="lb"><</label> 170 <!--ip 5--> 171 <label for="ip_6" class="lb">></label> 172 <label for="ip_4" class="lb"><</label> 173 <!--ip 6--> 174 <label for="ip_1" class="lb">></label> 175 <label for="ip_5" class="lb"><</label> 176 <!--按鈕部分 end--> 177 <div id="show-box"></div> 178 179 </div> 180 </body> 181 </html>
原理：一個單選按鈕（input）對應一對「前進後退」按鈕（label）。
當單選按鈕被切換時，隱藏原來的按鈕組，顯示新的按鈕組。
藍色實際爲隱藏的按鈕組，紅色爲顯示的按鈕組。spa
在實際的應用中，藍色的按鈕其實是不顯示的。當紅色的按鈕（label）被點擊的時候，就會修改相應的input按鈕的選中狀態。同時也會把原來顯示那一組紅色按鈕隱藏起來，再顯示新的一組紅色按鈕，以此類推。code
4.因爲是用於演示這個結構的原理，全部label的樣式有些特別，在實際中，咱們能夠把全部的「前進」按鈕和「後退」按鈕用絕對定位把它們所有疊在一塊兒，默認隱藏，只有被選中的input對應的兩個label纔會被顯示。
如下是具體的實踐用demo：htm
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS 實現前進/後退按鈕切換</title> 6 <style type="text/css"> 7 /*初始設置*/ 8 #show-window { 9 position: relative; 10 width: 720px; 11 height: 340px; 12 margin: 20px auto; 13 border: 1px solid #000; 14 text-align: center; 15 } 16 17 .inputs { 18 width: 20px; 19 height: 20px; 20 margin: 0 10px; 21 display: none; 22 } 23 24 .link { 25 position: absolute; 26 display: block; 27 width: 38px; 28 height: 100px; 29 margin-top: 6px; 30 font-size: 50px; 31 line-height: 100px; 32 /*默認隱藏全部的link*/ 33 visibility: hidden; 34 cursor: pointer; 35 } 36 37 /*使用絕對定位，把全部的link分別疊加在一塊兒；*/ 38 .prev { 39 left: 0; 40 top: 100px; 41 } 42 43 .next { 44 left: 762px; 45 top: 100px; 46 } 47 48 #show-box { 49 width: 500px; 50 height: 300px; 51 margin: 20px auto 0; 52 background: -webkit-linear-gradient(top, #6de3ff, #6de3ff) 0 0/100% no-repeat, 53 -webkit-linear-gradient(top, #7aff90, #7aff90) 0 0/100% no-repeat, 54 -webkit-linear-gradient(top, #ff7251, #ff7251) 0 0/100% no-repeat, 55 -webkit-linear-gradient(top, #fffc75, #fffc75) 0 0/100% no-repeat, 56 -webkit-linear-gradient(top, #ff4b8a, #ff4b8a) 0 0/100% no-repeat, 57 -webkit-linear-gradient(top, #ffae51, #ffae51) 0 0/100% no-repeat; 58 -webkit-transition: all .5s ease-in-out; 59 -moz-transition: all .5s ease-in-out; 60 -ms-transition: all .5s ease-in-out; 61 -o-transition: all .5s ease-in-out; 62 transition: all .5s ease-in-out; 63 } 64 65 /*初始設置 end*/ 66 67 /*按鈕部分*/ 68 /*第1個*/ 69 .inputs:nth-of-type(1):checked ~ .link:nth-of-type(1), 70 .inputs:nth-of-type(1):checked ~ .link:nth-of-type(2) { 71 background-color: #ff4050; 72 visibility: visible; 73 } 74 75 /*第2個*/ 76 .inputs:nth-of-type(2):checked ~ .link:nth-of-type(3), 77 .inputs:nth-of-type(2):checked ~ .link:nth-of-type(4) { 78 background-color: #ff4050; 79 visibility: visible; 80 } 81 82 /*第3個*/ 83 .inputs:nth-of-type(3):checked ~ .link:nth-of-type(5), 84 .inputs:nth-of-type(3):checked ~ .link:nth-of-type(6) { 85 background-color: #ff4050; 86 visibility: visible; 87 } 88 89 /*第4個*/ 90 .inputs:nth-of-type(4):checked ~ .link:nth-of-type(7), 91 .inputs:nth-of-type(4):checked ~ .link:nth-of-type(8) { 92 background-color: #ff4050; 93 visibility: visible; 94 } 95 96 /*第5個*/ 97 .inputs:nth-of-type(5):checked ~ .link:nth-of-type(9), 98 .inputs:nth-of-type(5):checked ~ .link:nth-of-type(10) { 99 background-color: #ff4050; 100 visibility: visible; 101 } 102 103 /*第6個*/ 104 .inputs:nth-of-type(6):checked ~ .link:nth-of-type(11), 105 .inputs:nth-of-type(6):checked ~ .link:nth-of-type(12) { 106 background-color: #ff4050; 107 visibility: visible; 108 } 109 110 /*按鈕部分 end*/ 111 /*圖像部分*/ 112 .inputs:nth-of-type(1):checked ~ #show-box { 113 background-position: 0, 560px, 1120px, 1680px, 2240px, 2800px; 114 } 115 116 .inputs:nth-of-type(2):checked ~ #show-box { 117 background-position: -560px, 0, 560px, 1120px, 1680px, 2240px; 118 } 119 120 .inputs:nth-of-type(3):checked ~ #show-box { 121 background-position: -1120px, -560px, 0, 560px, 1120px, 1680px; 122 } 123 124 .inputs:nth-of-type(4):checked ~ #show-box { 125 background-position: -1680px, -1120px, -560px, 0, 560px, 1120px; 126 } 127 128 .inputs:nth-of-type(5):checked ~ #show-box { 129 background-position: -2240px, -1680px, -1120px, -560px, 0, 560px; 130 } 131 132 .inputs:nth-of-type(6):checked ~ #show-box { 133 background-position: -2800px, -2240px, -1680px, -1120px, -560px, 0; 134 } 135 136 /*圖像部分 end*/ 137 </style> 138 </head> 139 <body> 140 <div id="show-window"> 141 <!--連接部分--> 142 <input type="radio" name="inputs" id="inputs_1" class="inputs" title="" checked> 143 <input type="radio" name="inputs" id="inputs_2" class="inputs" title=""> 144 <input type="radio" name="inputs" id="inputs_3" class="inputs" title=""> 145 <input type="radio" name="inputs" id="inputs_4" class="inputs" title=""> 146 <input type="radio" name="inputs" id="inputs_5" class="inputs" title=""> 147 <input type="radio" name="inputs" id="inputs_6" class="inputs" title=""> 148 <!--連接部分 end--> 149 150 <!--按鈕部分--> 151 <!--inputs 1--> 152 <label for="inputs_6" class="link prev"><</label> 153 <label for="inputs_2" class="link next">></label> 154 <!--inputs 2--> 155 <label for="inputs_1" class="link prev"><</label> 156 <label for="inputs_3" class="link next">></label> 157 <!--inputs 3--> 158 <label for="inputs_2" class="link prev"><</label> 159 <label for="inputs_4" class="link next">></label> 160 <!--inputs 4--> 161 <label for="inputs_3" class="link prev"><</label> 162 <label for="inputs_5" class="link next">></label> 163 <!--inputs 5--> 164 <label for="inputs_4" class="link prev"><</label> 165 <label for="inputs_6" class="link next">></label> 166 <!--inputs 6--> 167 <label for="inputs_5" class="link prev"><</label> 168 <label for="inputs_1" class="link next">></label> 169 <!--按鈕部分 end--> 170 <div id="show-box"></div> 171 </div> 172 </body> 173 </html>
最後說幾句：以上就是使用純CSS來實現「前進/後退」按鈕功能的基本介紹。能夠看到雖然使用CSS也能夠實現這種效果，可是其代碼量比較大。使用js就能夠很輕鬆的實現這種效果，特別是在數量比較大的狀況下，其優點很是明顯。blog
The end.事件
by Little
相關文章
- 1. 前進後退功能
- 2. AngularJS 後退按鈕
- 3. cocos2d lua 實現按鈕長按功能
- 4. cocoscreator按鈕長按功能實現
- 5. 經過electron的webView使用按鈕控制前進後退
- 6. 棧：如何實現瀏覽器的前進後退功能
- 7. 棧：如何實現瀏覽器的前進和後退功能？
- 8. 棧實現瀏覽器的前進和後退功能
- 9. 棧：實現瀏覽器的前進後退功能
- 10. 點擊按鈕後退_什麼是後退按鈕焦點？
- 更多相關文章...
- • jQuery Mobile 按鈕 - jQuery Mobile 教程
- • ionic 按鈕 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章