开发者学堂课程【移动 Web 前端开发:js 功能-轮播图效果-需求分析】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8415
js功能-轮播图效果-需求分析
基本内容
一、轮播图功能分析
二、各功能下效果的产生
一、 轮播图功能分析
打开例图:
第一个功能是:自动播放或者是自动滚动。 自动播放包含了无缝滚动和无缝滑动。
第二个功能是: 在无缝滚动的过程中, 图片上的点盒子也随之发生变化。
第三个功能是:可以滑动。
第四个功能是:当滑动程度不太大时, 滑动距离不够,在停止滑动后图片会被吸附回去。
第五个功能是:当滑动一定的距离后,图片会跳转,显示为上一张或者下一张。
二、各功能下效果的产生
1、自动滚动的原理是什么?
答:定时器、过渡、位移;
简单的动画用过渡;在移动端过渡时使用位移;
2、 点对应改变的原理是什么?
答:改变 “当前的样式“,对应的哪一个就改变哪一个 。
3、 在移动端怎么进行滑动?
答:借助 touch 事件, 通过差池事件来监听、 触摸点改变距离或者位移。
4、 怎样才可以实现吸附的效果?
答:过渡 + 位移。
5、 它也是一个动画的过程, 要确定它变为上一张还是下一张必须判断方向, 接着进行过渡和位移。