移动幻灯片的代码为什么要重复写

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2020-06-17 19:08:46

同学你好,问题解答如下:

第一个红框内的代码,是实例化Slider时执行的。初始时,用户可能不想让幻灯片默认显示第一张,所以可能传入参数initIndex来控制幻灯片默认显示第几张,如下:

http://img1.sycdn.imooc.com//climg/5ee9f8fa0961e29715120241.jpg

如果用户传入了非0的initIndex,就需要在页面打开瞬间,让幻灯片快速显示第二张(无动画移动),所以调用了move方法(move方法无动画效果)。

第二个红框内的move方法,是在to方法中调用的,而to方法是在切换上一张、下一张幻灯片时调用:

http://img1.sycdn.imooc.com//climg/5ee9f93e0916fa6d05540209.jpg

而在切换上一张、下一张时,幻灯片的切换过程需要有动画,即缓缓地切换到指定图片,而move方法本身是没有动画效果的,所以利用move方法,封装了一个to方法;在to方法中使用_setTransitionSpeed方法给“slider-item-container”设置了“transition-duration”属性(过渡时间),然后再调用move方法移动幻灯片:

http://img1.sycdn.imooc.com//climg/5ee9f959094f23ae08660289.jpg

简单来说,需要快速切换幻灯片的地方,需要使用move方法,而需要动画切换的地方,就要用to方法。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师