分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3、JS实现图片简单无缝轮播功效；

一、使用CSS3实现：利用animation属性

（实现一张一张的轮播，肉眼只看见一张图片）

HTML部分比较简单，两个div下包着几个img标签；为了实现无缝轮播，注意第一张图片要与最后一张图片相同；

<div class="out">
            <div class="imgs">
                <img src="img/beatuy.jpg"/>
                <img src="img/child.jpg"/>
                <img src="img/girl.jpg"/>
                <img src="img/milk.jpg"/>
                <img src="img/cup.jpg"/>
                <img src="img/dog.jpg"/>
                <img src="img/beatuy.jpg"/>
            </div>
        </div>

最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言；

CSS代码如下：