纯css3制作图片轮播

使用css3制作轮播功能

html代码：

<div class="slide" style="max-width:650px;">



     <input type="radio" name="slider" id="slide1" checked="checked" >

     <input type="radio" name="slider" id="slide2" >

     <input type="radio" name="slider" id="slide3" >

     <input type="radio" name="slider" id="slide4" >





    <div class="slide">

       <ul class="ce">

         <li><a href="javasript:;" ><img src="1.png" /></a></li>

         <li><a href="javasript:;" ><img src="2.jpg" /></a></li>

         <li><a href="javasript:;" ><img src="3.jpg" /></a></li>

         <li><a href="javasript:;" ><img src="4.jpg" /></a></li>

       </ul>

    </div>

    <div class="slidehd">

         <label for="slide1"></label>

         <label for="slide2"></label>

         <label for="slide3"></label>

         <label for="slide4"></label>

    </div>

</div>

View Code

 css部分代码：

*{margin:0; padding:0;}

ul{list-style:none;}

img{border:0}

html,body{

  width: 100%;

  height: 100%;

}

.slide{

  width:100%;

  height:100%;

  margin:0 auto;

  text-align:center;

  position:relative;

  overflow:hidden;

}

.slide .ce{

  width:400%;

  height:100%;

  position:absolute;

  left:0;top:0;

  -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 .ce li{

  float:left;

  width: 25%;

  height: 100%;

}

.slide .ce li a{

  width: 100%;

  height: 100%;

  display: block;

  display: -webkit-box;

  -webkit-box-pack:center;

  -webkit-box-align:center;

}

.slide .ce li a img{

  width:100%;

  cursor:pointer;

  display: block;

}





/* 初始化按钮 */

.slidehd{

  position:absolute;

  width:100%;

  bottom:10px;

}

.slidehd label{

  width:10px; 

  height:10px; 

  line-height:10px; 

  border: 1px solid red;

  border-radius:10px;

  display:inline-block; 

  text-indent:-9999px;

  -webkit-transition:-webkit-transform .1s ease-in;

  -moz-transition:-moz-transform .1s ease-in;

  -o-transition:-o-transform .1s ease-in;

  -ms-transition:-ms-transform .1s ease-in;

  transition:transform .1s ease-in;

}



/* checkbox选择时变化  */

.slidehd label:hover,

#slide1:checked~.slidehd label:nth-child(1),

#slide2:checked~.slidehd label:nth-child(2),

#slide3:checked~.slidehd label:nth-child(3),

#slide4:checked~.slidehd label:nth-child(4){

  background:red;

  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)

}



/* input开始 */

.slide input{display:none;}

#slide1:checked~.slide .ce{left:0;}  /* 兄弟选择符 */

#slide2:checked~.slide .ce{left:-100%;}

#slide3:checked~.slide .ce{left:-200%;}

#slide4:checked~.slide .ce{left:-300%;}

View Code