html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <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="newsaa.jpg"/> </li> <li> <img src="newsaa.jpg"/> </li> <li> <img src="newsaa.jpg"/> </li> <li> <img src="newsaa.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> </body> </html>
css3:
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: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;} .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:0;} #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) }
评论前必须登录!
注册