1回答

好帮手慕慕子

2021-07-01

同学你好， 对于你的问题解答如下：

1、因为一开始克隆了第一张图片追加到ul中，如下：

当移动到第四张图片，再次点击右按钮时，idx++执行后值为5，满足if条件，会执行里面的定时器，但是由于定时器是异步操作，会在右按钮点击事件函数中其他同步代码执行完之后再执行。

 

所以再次点击右按钮时，先显示的是克隆的第一张图片，如下：

500ms后，执行定时器中的代码，将ul瞬间拉回到left=0的位置，此时显示的就是真正的第一张图片了。

同学可以下载源码，去掉.carousel元素的overflow:hidden; 结合代码实现的效果帮助自己更好的去理解。

2、根据第一条的分析可知，当移动到最后一张时，再次点击右按钮时，先执行 list.style.left = -idx * 650 + 'px';显示克隆的第一张图片，然后才会执行定时器中的代码list.style.left = 0;，将ul瞬间定位到一开始的位置。

祝学习愉快~

0