主要就是利用css3中的动画了，看完整实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css实现轮播图效果</title>
    <style>
        @keyframes move{
            0%{
                transform:translateX(0%);
            }
            20%{
                transform:translateX(0%);
            }
            25%{
                transform:translateX(-500px);
            }
            45%{
                transform:translateX(-500px);
            }
            50%{
                transform:translateX(-1000px);
            }
            70%{
                transform:translateX(-1000px);
            }
            75%{
                transform:translateX(-1500px);
            }
            95%{
                transform:translateX(-1500px);
            }
            100%{
                transform:translateX(-2000px);
            }

        }
        .wrap{width:500px; height:320px;
            position:relative; margin:50px auto;
            border:5px solid #f00;
            overflow:hidden;
        }
        ul,li{margin:0; padding:0; list-style:none;}
        img{vertical-align: top; border:none;}
        .list{width:500%;  animation: move 7s linear infinite}
        .list li{float:left; width:500px; height:320px;}
        .list img{width:100%; height:100%;}
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li><img src="imgs/ad_1.jpg" alt=""/></li>
        <li><img src="imgs/ad_2.jpg" alt=""/></li>
        <li><img src="imgs/ad_3.jpg" alt=""/></li>
        <li><img src="imgs/ad_4.jpg" alt=""/></li>
        <li><img src="imgs/ad_1.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>

补充：2021/05/12 

注意：图片列表的第一张和最后一张是一样的，否则会出现快速闪过的效果

纯css3实现无缝轮播图效果_css