js使用transitionend实现图片无缝轮播

假设有四张图片，顺序为    1  2  1  2    ，每张图片宽度为1190px，

两个数字一样代表两张图片是一样的，只是一个轮回

一开始设置CSS代码 transform: translate3d(-2380px, 0px, 0px); 

即一开始显示第三张图片。

然后添加js代码，设置num=-2380，

当点击向左按钮时，num每次增加1190px，

num=num+1190；    1190px  即一张图片的宽度

div.style.transform = 'translate3d('+num+'px,'+0+'px,'+0+'px)';       

div.style.transition= "transform 500ms ease-in-out 0s";       设置轮播时间为500ms  

当num轮播到第一张图片，即num=0时，

此时需要用到ontransitionend监听事件

ontransitionend  表示等轮播过渡完后开始执行监听事件里的代码块，

也就是说轮播到第一张图片，等第一张图片显示完毕后，就可以执行ontransitionend里面的代码块

此时设置num=-2380,  跳转时间为0ms

div.style.transform = 'translate3d('+num+'px,'+0+'px,'+0+'px)'; 

div.style.tran