轮播图循环切换闪动问题详解
在使用 translate3d 进行轮播图的循环切换时，当快速连续点击切换按钮，可能会出现图片闪动的问题。
该问题产生的原因是：在切换到最后一页时，由于图片需要重新回到第一页，因此需要一个短暂的过渡动画。而快速连续点击会导致本次动画还没有结束，就又触发了下次动画，从而导致了闪烁。
解决方法：
修改 changecur 方法，在循环切换时，加入一个额外的判断。当切换到最后一页时，手动将过渡时长设置为 0，然后设置当前页码为 0，然后再将过渡时长恢复为正常值，并设置当前页码为 1。这样就可以避免在最后一页切换时出现闪烁的情况。
修改后的 changecur 方法：
changeCur(add){
// ...原有代码
if (add && cur === this.num) {
this.con.style.transitionDuration = '0s';
this.setCur(0);
this.con.offsetWidth;
this.con.style.transitionDuration = '.3s';
this.setCur(1);
} else if (!add && cur === 1) {
this.con.style.transitionDuration = '0s';
this.setCur(this.num + 1);
this.con.offsetWidth;
this.con.style.transitionDuration = '.3s';
this.setCur(this.num);
} else {
// ...原有代码
}
}以上就是轮播图快速切换闪动怎么办？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
789
收藏
