可以使用css实现简单的走马灯效果如下图

 首先定义html部分使用 .box>li>a的结构.注意:由于后面显示会出现空白,需要把前三个图片加在后面,形成闭环实现一直轮播的效果.

    <div class="box">
        <ul>
            <li><a href="#"><img src="../images/images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/6.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/7.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="../images/images/3.jpg" alt=""></a></li>
        </ul>
    </div>

设置盒子边框,使用父相子绝定位居中.同时设置图片大小使其在box框内一行显示并设置溢出隐藏

        .box {
            /*父相子绝定位居中*/
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            width: 600px;
            height: 150px;
            border: 3px solid black;
            overflow: hidden;
        }

        .box ul li {
            float: left;
            height: 150px;
            width: 200px;
        }

        .box ul li img {
            height: 150px;
            width: 200px;
        }

        .box ul {
            list-style: none;
            height: 150px;
            width: 2000px;
        }

设置整个ul向左移动的动画效果并让ul调用

        .box ul {
            list-style: none;
            height: 150px;
            width: 2000px;
            animation: move 5s linear infinite;
        }
        @keyframes move {
            100% {
/*设置为1400是因为7张照片为一个周期,最后会有三张留白,需要再次加入前三张图片*/
                transform: translate(-1400px);
            }
        }

大功告成!