纯html_css实现图片轮播

 

<style>
    #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
    #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
    #photos img{float:left;width:300px;height:200px}
    #photos {  position: absolute;z-index:9;  width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }
    .play{ animation: ma 20s ease-out infinite alternate;}
    @keyframes ma {
        0%,25% {        margin-left: 0px;       }
        30%,50% {       margin-left: -300px;    }
        55%,75% {       margin-left: -600px;    }
        80%,100% {       margin-left: -900px;    }

    }
</style>
<div id="frame" >
    <div id="photos" class="play">
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" >
        <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1954556401,4253539227&fm=170&s=2A2C7D2243A3C2ED0AD0F1DC0000D0B1&w=640&h=731&img.JPEG" >
        <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2816586851,1045936241&fm=170&s=F995099C92C07AFCE711008403007082&w=640&h=411&img.JPEG" >
        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2360817639,1949908322&fm=170&s=C7135B8452332FADE021B0B503001081&w=640&h=813&img.JPEG" >
        <ul id="dis">
            <li>111111111111111</li>
            <li>22222222222222</li>
            <li>33333333333333</li>
            <li>44444444444444</li>
        </ul>
    </div>
</div>