css3实现幻灯片自动播放

css3代码部分

    <style>
     *{
         padding: 0;
         margin: 0;
     }
     .box{
         display: block;
         width: 300px;
         height: 70px;
         overflow: hidden;
     }
     ul{
         position: relative;
         left: -600px;
        display: block;
         width: 900px;
         height: 70px;
         animation:mylocation 5s infinite linear;
     }
     @keyframes mylocation{
         33%{
          padding-left: 300px;
         }
         44%{
            padding-left: 300px;
         }
         66%{
             padding-left: 600px;
         }
         77%{
            padding-left: 600px;
         }
     }
     li{
         display: block;
         float: left;
         width: 300px;
         height: 70px;
     }
     li img{
         display: block;
         width: 300px;
         height: 70px;
     }
    </style>

html代码部分

    <div class="box">
        <ul>
            <li><img src="mc.png" alt=""></li>
            <li><img src="lb.jpg" alt=""></li>
            <li><img src="zgl.jpg" alt=""></li>

        </ul>
    </div>
    

效果：

原理：设置一个盒子，把ul放到盒子里
三个容纳图片的 li 在 ul 内水平排列
ul的实际宽度是盒子宽度的三倍
在盒子中使用 overflow: hidden;属性
使ul超出盒子的部分不可见
最后通过 ul 的 padding-left: ;属性改变左填充间距
从而使 li 位置整体向后移
通过动画效果改变li的位置从而达到幻灯片效果
————————————————————————————————

实现连续无限滚动动画

上述效果会在下一次动画开始时有一小段的闪烁，为了解决闪烁需要：
1.假设需要四张图片轮换播放

需要为ul设置六个图片的宽度，并且在1，2，3，4图片后插入两张1，2
设置一组动画改变margin为四张图片宽度，第一组动画结束后的效果为
此时添加的 1，2在盒子中，且此时动画重新开始，盒子中的图片由1，2变为1，2就可以实现无闪烁轮播动画