使用纯css3实现与轮播器一样的功能。
HTML代码：
1 <div class="slide-container"> 2 <input type="radio" name="slider2" id="slider1" checked="checked" > 3 <input type="radio" name="slider2" id="slider2" > 4 <input type="radio" name="slider2" id="slider3" > 5 <input type="radio" name="slider2" id="slider4" > 6 <div class="slide_bd"> 7 <ul class="list"> 8 <li> 9 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/> 10 </li> 11 <li> 12 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/> 13 </li> 14 <li> 15 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg"/> 16 </li> 17 <li> 18 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg"/> 19 </li> 20 </ul> 21 </div> 22 <div class="num"> 23 <label for="slider1"></label> 24 <label for="slider2"></label> 25 <label for="slider3"></label> 26 <label for="slider4"></label> 27 </div> 28 </div>
CSS代码：
1 ul,li{list-style:none;} 2 .slide-container {position:relative;width:384px;height:512px;margin:0 auto;text-align:center;overflow:hidden;} 3 .slide-container input{display:none;} 4 5 .slide_bd {position:absolute;width:100%;height:100%;overflow:hidden;} 6 7 .slide_bd .list {position:absolute;left:0;top:0;width:400%;height:100%;-webkit-transition:left .5s ease-out;-moz-transition:left .5s ease-out;-o-transition:left .5s ease-out;-ms-transition:left .5s ease-out;transition:left .5s ease-out;} 8 9 .slide_bd .list li {float:left;} 10 11 /* #slider1:checked~.slide_bd .list含义是：匹配#slider1选中的 后面的.slide_bd .list的元素 */ 12 /* ~ 是兄弟元素选择器 E~F：匹配位于E元素后面的F元素*/ 13 14 #slider1:checked~.slide_bd .list{left:0;} 15 #slider2:checked~.slide_bd .list{left:-100%;} 16 #slider3:checked~.slide_bd .list{left:-200%;} 17 #slider4:checked~.slide_bd .list{left:-300%;} 18 19 .slide_bd .list img{display:block;width:384px;height:512px;overflow:hidden;} 20 21 .num {position:absolute;bottom:10px;width:100%;} 22 23 .num label {display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 5px;background:#999;} 24 25 /* 鼠标移动上去的时候 */ 26 .num label:hover, 27 #slider1:checked~.num label:nth-child(1), 28 #slider2:checked~.num label:nth-child(2), 29 #slider3:checked~.num label:nth-child(3), 30 #slider4:checked~.num label:nth-child(4){ 31 background:#f00; 32 cursor:pointer; 33 -webkit-transform:scale(1.3); 34 -moz-transform:scale(1.3); 35 -o-transform:scale(1.3); 36 -ms-transform:scale(1.3); 37 transform:scale(1.3) 38 }
