开发者学堂课程【移动 Web 前端开发:js 功能-点对应改变】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8420
js 功能-点对应改变
一、代码
JS 内容:
/*怎么监听过渡结束这个时间点 过渡结束事件*/
imageBox.addEventListener('transitionend',function(){
/*无缝滚动*/
if(index >= 9){
/*瞬间定位到第一张*/
index = 1;
/*清楚过渡*/
removeTranstion();
/*定位*/
setTranslateX(-index*width);
}
/*无缝滑动*/
else if(index <= 0){
/*瞬间定位到第八张*/
index = 8;
/*清楚过渡*/
removeTranstion();
/*定位*/
setTranslateX(-index*width);
}
/*正常*/
/* index 取值范围 1-8 对应点的 0-7*/
setPoint();
});
/*2.点盒子对应改变(改变当前样式)*/
var setPoint = function(){
/* index 1-8*/
/*去除所有的 now 样式*/
for(var i = 0;i < points.length ; i ++){
points[i].classList.remove('now');
}
/*给对应的加上*/
points[index-1].classList.add('now');
}
}