老师这里还是不是很理解

来源:5-5 滑入滑出的第二种实现方式--头尾相连无缝滚动

陈立天

2020-06-11 11:00:40

http://img.mukewang.com/climg/5ee19e51093ffda227021289.jpg

写回答

2回答

好帮手慕慕子

2020-06-11

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

  1. 点击右侧按钮切换图片时,从最后一张切换到第一张时,显示在页面中的其实是克隆的第一张图片。示例:可以去掉外层盒子的overflow:hidden;属性,更好的查看效果。

    http://img.mukewang.com/climg/5ee1c1c509b5cef311850521.jpg

    继续点击右侧按钮,应该要显示第二张图片。但是这个过程是: 此时index值为0 ,让整体瞬间切换到轮播图显示区域的最左侧,然后将this.curIndex和index值设置1,让第二张图进入到可视区域。实现从第一张图切换到第二张图的效果。

    http://img.mukewang.com/climg/5ee1c23d09ea1c0811690442.jpg

    同学可以回顾下视频讲解,结合源码测试效果帮助自己更好的去理解

  2. 因为每第二种切换方式是整体一起移动的,所以快速点击右侧按钮,会出现一定的问题,针对这种实现方式,这个效果是正常的,如果要考虑快速点击的问题,使用第一种方式去实现效果即可。

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

0

陈立天

提问者

2020-06-11

还有就是用方法二测试的图片轮播 快速点击右边的按钮,图片轮播的效果滑动会出现问题。二方法一实现的就不会有这样的问题。。这是为什么 能解决吗?

0

0 学习 · 14456 问题

查看课程