CSS 实现“前进/后退”按钮的功能

前言：一般的轮播效果中，可以通过序号来进行图片切换。同时，还有两个控制按钮“前进/后退”。

在js环境下，我们会先保存一个图片编号变量，然后通过点击事件来修改这个编号，从而修改要显示的图片。

在纯CSS环境中，我们通常只能使用点击序号来切换图片，无法实现通过变量来切换要显示的图片。接下来将介绍如何使用CSS来解决切换按钮的问题。

1.首先，通过input标签和伪类选择符“+”和“~”，可以实现点击单选按钮来切换图片的功能。同时还会使用label标签来绑定对应的input标签。

　　例如：

 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。

　　例如：

 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。这样就可以实现一个简单的“前进/后退”切换的功能。

　　根据这个结构，可以继续扩展。实现多个input都绑定两个label。

　　以下使用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">&lt;</label>
10 <label for="inputs_2" class="link next">&gt;</label>
11 <!--inputs 2-->
12 <label for="inputs_1" class="link prev">&lt;</label>
13 <label for="inputs_3" class="link next">&gt;</label>
14 <!--inputs 3-->
15 <label for="inputs_2" class="link prev">&lt;</label>
16 <label for="inputs_4" class="link next">&gt;</label>
17 <!--inputs 4-->
18 <label for="inputs_3" class="link prev">&lt;</label>
19 <label for="inputs_5" class="link next">&gt;</label>
20 <!--inputs 5-->
21 <label for="inputs_4" class="link prev">&lt;</label>
22 <label for="inputs_6" class="link next">&gt;</label>
23 <!--inputs 6-->
24 <label for="inputs_5" class="link prev">&lt;</label>
25 <label for="inputs_1" class="link next">&gt;</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">&gt;</label>
160     <label for="ip_6" class="lb">&lt;</label>
161     <!--ip 2-->
162     <label for="ip_3" class="lb">&gt;</label>
163     <label for="ip_1" class="lb">&lt;</label>
164     <!--ip 3-->
165     <label for="ip_4" class="lb">&gt;</label>
166     <label for="ip_2" class="lb">&lt;</label>
167     <!--ip 4-->
168     <label for="ip_5" class="lb">&gt;</label>
169     <label for="ip_3" class="lb">&lt;</label>
170     <!--ip 5-->
171     <label for="ip_6" class="lb">&gt;</label>
172     <label for="ip_4" class="lb">&lt;</label>
173     <!--ip 6-->
174     <label for="ip_1" class="lb">&gt;</label>
175     <label for="ip_5" class="lb">&lt;</label>
176     <!--按钮部分 end-->
177     <div id="show-box"></div>
178 
179 </div>
180 </body>
181 </html>

演示 html

原理：一个单选按钮（input）对应一对“前进后退”按钮（label）。
当单选按钮被切换时，隐藏原来的按钮组，显示新的按钮组。
蓝色实际为隐藏的按钮组，红色为显示的按钮组。

> < > < > < > < > < > <

在实际的应用中，蓝色的按钮实际上是不显示的。当红色的按钮（label）被点击的时候，就会修改相应的input按钮的选中状态。同时也会把原来显示那一组红色按钮隐藏起来，再显示新的一组红色按钮，以此类推。

4.由于是用于演示这个结构的原理，所有label的样式有些特别，在实际中，我们可以把所有的“前进”按钮和“后退”按钮用绝对定位把它们全部叠在一起，默认隐藏，只有被选中的input对应的两个label才会被显示。

　　以下是具体的实践用demo：

  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">&lt;</label>
153 <label for="inputs_2" class="link next">&gt;</label>
154 <!--inputs 2-->
155 <label for="inputs_1" class="link prev">&lt;</label>
156 <label for="inputs_3" class="link next">&gt;</label>
157 <!--inputs 3-->
158 <label for="inputs_2" class="link prev">&lt;</label>
159 <label for="inputs_4" class="link next">&gt;</label>
160 <!--inputs 4-->
161 <label for="inputs_3" class="link prev">&lt;</label>
162 <label for="inputs_5" class="link next">&gt;</label>
163 <!--inputs 5-->
164 <label for="inputs_4" class="link prev">&lt;</label>
165 <label for="inputs_6" class="link next">&gt;</label>
166 <!--inputs 6-->
167 <label for="inputs_5" class="link prev">&lt;</label>
168 <label for="inputs_1" class="link next">&gt;</label>
169     <!--按钮部分 end-->
170     <div id="show-box"></div>
171 </div>
172 </body>
173 </html>

实践 demo

最后说几句：以上就是使用纯CSS来实现“前进/后退”按钮功能的基本介绍。可以看到虽然使用CSS也可以实现这种效果，但是其代码量比较大。使用js就可以很轻松的实现这种效果，特别是在数量比较大的情况下，其优势非常明显。

The end.

by Little