纯CSS3实现轮播切换效果

    使用纯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         }

点击查看效果

转载于:https://www.cnblogs.com/qbzmy/p/5818909.html