开发者学堂课程【移动 Web 前端开发：js 功能-无缝滑动】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8419
js功能-无缝滑动
基本内容：
一、需求原因
二、无缝滑动
一、需求原因
当第八页的滑动效果，已经超过了一半，这时候该怎么办？此时将会跳到索引为9的一张图片，这个过程会产生过渡效果，此时会有动画效果，产生动画后将会被索引监听到，有了过渡之后将会瞬间定位到第一张图片。这就是无缝滚动。
* 1.无縫滚动&无縫滑动( 定时器 过渡 位移 )
写这个程序的目的就是要它滚动，那么需要依靠谁来让它滚动？ 依赖于索引。
var index = 1；当前定位是1；首页默认显示索引1 的图片；
首先需要定时器，每隔一秒执行一次；每定时一次索引需要加1，
var timer = setInterval ( function ( ) {
index ++;
/*过渡*/
addTransition();
/*位移*/
setTranslateX(-index*width);
},1000);
/*怎么监听过渡结束这个时间点 过渡结束事件*/
imageBox . addEventlistener( ' transitionend'，function(){
/*无缝滚动*/
二、无缝滑动
当第一张图片往右滑动的时候，滑动到已经超过零索引一半的时候，将会直接切换到 0 索引，然后在瞬间定位到索引为8的图片上。
当动画结束之后，并且 index ≤ 0；
if(index >=9 ){
/*瞬间定位到第一张*/
index = 1;
/*清除过渡*/
removeTransition();
/*定位*/
setTranslatex( - index*width);
}
/*无缝滑动*/
else lif(index <= 0){
当索引≤0的时候，瞬间定位到第八张。怎么样瞬间定位？首先清除过渡，再做定位；
index = 8 ；
/*清除过渡*/
removeTransition();
/*定位*/
setTranslatex( - index*width);
l 此时图片的左、右都已经被控制，做到了无缝滑动。
l 除了以上情况，在其他情况下都是正常的。
