开发者学堂课程【移动 Web 前端开发：js 功能-无缝滚动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8418
js功能-无缝滚动
监听时的注意事项
* 1.无縫滚动&无縫滑动( 定时器 过渡 位移 )
写这个程序的目的就是要它滚动，那么需要依靠谁来让它滚动？ 依赖于索引。
var index = 1；当前定位是1；首页默认显示索引1 的图片；
首先需要定时器，每隔一秒执行一次；每定时一次索引需要加1，
var timer = setInterval ( function ( ) {
index ++;
/*过渡*/
addTransition();
/*位移*/
setTranslateX(-index*width);
},1000);
/*怎么监听过渡结束这个时间点 过渡结束事件*/
imageBox . addEventListener( " transitionend' , function(){
console. log( " transitionend );
刷新完它会执行几次？答： 它一直会执行下去， 每播放完一张照片， 过渡就结束了一次，它就会接着播放下一张， 当播放完第九张照片， 然后就会瞬间定位到第一张照片， 这样就会达到一个无缝滚动的效果。
if (index >= 9) { 瞬间定位到第一张
当前的索引≥9, 这样会显得更加严谨一点.
index = 1；此时索引为1
/*清除过渡*/
imageBox. style. transition = 'none';
imageBox. style.webkitTransition = 'none'; /*兼容*/
或者removeTransition();和上方的代码性质一样
/*定位*/ 如果要瞬间定位回去，那就需要位移
以下这两条代码不是瞬间定位到第一张图片，因为在此之前已经过渡了一次，否则依然是一个动画过程，如果想要瞬间定位到第一张图片；那么就要清除过渡， 重新定位一次。
imageBox.style.transform = 'translatex(+‘（-index*width）’+‘px‘)';
imageBox.style.webkittransform = 'translatex(+‘（-index*width）’+‘px‘)';
或者
setTranslateX(-index*width);
});
和上方的代码性质一样
