纯CSS3实现轮播切换效果

使用纯css3实现与轮播器一样的功能。

HTML代码：

        <div class="slide-container">
             <input type="radio" name="slider2" id="slider1" checked="checked" >
             <input type="radio" name="slider2" id="slider2" >
             <input type="radio" name="slider2" id="slider3" >
             <input type="radio" name="slider2" id="slider4" >
             <div class="slide_bd">
                 <ul class="list">
                     <li>
                         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/>
                     </li>
                     <li>
                         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/>
                     </li>
                     <li>
                         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg"/>
                     </li>
                     <li>
                         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg"/>
                     </li>
                 </ul>
             </div>
             <div class="num">
                 <label for="slider1"></label>
                 <label for="slider2"></label>
                 <label for="slider3"></label>
                 <label for="slider4"></label>
             </div>
         </div>

CSS代码：

 ul,li{list-style:none;}
         .slide-container {position:relative;width:384px;height:512px;margin:0 auto;text-align:center;overflow:hidden;}
         .slide-container input{display:none;}

         .slide_bd {position:absolute;width:100%;height:100%;overflow:hidden;}

         .slide_bd .list {position:absolute;left:;top:;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;}

         .slide_bd .list li {float:left;}

         /*  #slider1:checked~.slide_bd .list含义是：匹配#slider1选中的 后面的.slide_bd .list的元素 */
         /* ~ 是兄弟元素选择器 E~F：匹配位于E元素后面的F元素*/

         #slider1:checked~.slide_bd .list{left:;}
         #slider2:checked~.slide_bd .list{left:-100%;}
         #slider3:checked~.slide_bd .list{left:-200%;}
         #slider4:checked~.slide_bd .list{left:-300%;}

         .slide_bd .list img{display:block;width:384px;height:512px;overflow:hidden;}

         .num {position:absolute;bottom:10px;width:100%;}

         .num label {display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 5px;background:#999;}

         /* 鼠标移动上去的时候 */
         .num label:hover,
         #slider1:checked~.num label:nth-child(1),
         #slider2:checked~.num label:nth-child(2),
         #slider3:checked~.num label:nth-child(3),
         #slider4:checked~.num label:nth-child(4){
             background:#f00;
             cursor:pointer;
             -webkit-transform:scale(1.3);
             -moz-transform:scale(1.3);
             -o-transform:scale(1.3);
             -ms-transform:scale(1.3);
             transform:scale(1.3)
         }

点击查看效果