css3实现幻灯片自动播放

css3代码部分

html代码部分

效果：

原理：设置一个盒子，把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就可以实现无闪烁轮播动画