1.纯Css实现轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} #wrap{ width:520px;height:280px; border:1px solid;overflow:hidden; position:absolute;top:100px;left:300px; } .box{ width:2600px;height:280px; position:relative; z-index:9; left:0; cursor:pointer; } .box>li{float:left;} .pics_list{ width:100%;height:8%; position:absolute;bottom:0px; background:#8B8878;opacity:0.8;filter:alpha(opacity:80); cursor:pointer;text-align:center; z-index:999; } .num{ position:absolute;z-index:10; display:inline-block; right:10px;bottom:0px; border-radius:100%; background:#f00; width:25px;height:25px; line-height:25px; cursor:pointer; color:#fff; text-align:center; opacity:0.8; margin:0 10px; } .num:hover{background:#00f;} .num:nth-child(2){margin-right:40px} .num:nth-child(3){margin-right:80px} .num:nth-child(4){margin-right:120px} .num:nth-child(5){margin-right:160px} .num:hover,.box:hover{animation-play-state:paused;} .play{ animation: ma 10s ease-out infinite alternate; } #a1:hover ~ .box{animation: ma1 .5s ease-out forwards;} #a2:hover ~ .box{animation: ma2 .5s ease-out forwards;} #a3:hover ~ .box{animation: ma3 .5s ease-out forwards;} #a4:hover ~ .box{animation: ma4 .5s ease-out forwards;} #a5:hover ~ .box{animation: ma5 .5s ease-out forwards;} @keyframes ma1 {0%{left:-1200px;}100%{left:-0px;} } @keyframes ma2 {0%{left:-1200px;}100%{left:-520px;} } @keyframes ma3 {100%{left:-1040px;} } @keyframes ma4 {100%{left:-1560px;} } @keyframes ma5 {100%{left:-2120px;} } @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/ 0%,20% { left: 0px; } 25%,40% { left: -520px; } 45%,60% { left: -1040px; } 65%,80% { left: -1560px; } 85%,100% { left: -2120px; } } </style> </head> <body> <div id="wrap"> <a class="num" id="a1"></a> <a class="num" id="a2"></a> <a class="num" id="a3"></a> <a class="num" id="a4"></a> <a class="num" id="a5"></a> <ul class="box play"> <li><img src="img/2.jpg" alt="" /></li> <li><img src="img/1.jpg" alt="" /></li> <li><img src="img/3.jpg" alt="" /></li> <li><img src="img/4.jpg" alt="" /></li> <li><img src="img/5.jpg" alt="" /></li> </ul> </div> </body> </html>