用appendChild方法实现无缝轮播图（附详细注释）

轮播图非常常见，今天就介绍怎样用appendChild以及translateX实现无缝轮播图。

以5张图，每张图宽200px为例

思路：

结构布局：最外层是一个大div，这个div的宽度以及高度就是显示的一张图片的宽高，设置position:relative以及overflow:hidden

然后用一个ul里面写四个li用来存放图片，把li设为float:left，ul的宽度设为四个li的宽度的总和，ul的position:absolute;top:0;left:-200px(此处后面详述)。

js部分每次让ul的translateX改变刚好一个li的宽度，在移动事件结束之后，如果是向后移动，每次把当前最后一个li放到当前第一个li前面，反之则反。核心函数是一个goNext（向后轮播）和一个goPrev（向前轮播）函数，自动循环播放时只需执行这两个的某一个即可。

下面是详细的代码

HTML部分：

CSS部分：

JS部分

注意下图中标注的往前添加时，由于添加了transitioned事件监听，所以是在移动之后才会向前添加，如果把ul的定位定在第一个li那里，而不是至少在第二个li之后，当第一个向后translateX之后，就会出现空白。故ul的定位不要让left为0。