各种轮播实现（纯css实现+js实现）

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>
View Code