Javascript实现轮播图

一、理论讲解 

1.请你想象轮播图的可视区域是一扇有固定宽高的窗户，而要轮播的许多内容是一列长长的火车，显然火车的。每次我们点击或者自动轮播时，“火车”相对窗户往前移动一段距离，好像在一轮轮播放一样。

火车由许多节车箱组成，那么这里的车厢与窗户的大小应该相等，这样火车向前移动，车厢也向前移动，才有轮播的感觉。

注意窗户一定要设置overflow:hidden;后面的车厢视觉上看不见了，但实际上是火车带动车厢移动。

二、轮播的实现

1.transform：translateX   该函数元素在x轴上发生位移，达到轮播的效果。

2.window设置：position:relative;

train则通过position定位，最初是position:absolute;left:0;

之后每次调节left值，实现位移。

这里示例的窗户与列车的宽度是1260px,index是对carrage的dom对象遍历时的下标参数。