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