轮播图循环切换闪动问题及解决方案

许多轮播图组件在循环切换到首图时，尤其当用户快速点击“下一页”按钮时，会出现明显的闪动。这种现象通常发生在使用 translate3d 实现平滑过渡的场景。本文分析此问题并提供有效解决方案。

循环切换时，浏览器需要先快速跳转到首图（避免动画中断），再执行动画过渡。这个快速跳转会打断渲染流程，导致闪烁。

为了解决这个问题，我们改进轮播图的切换方法 (changeCur)。核心在于利用 transitionDuration 属性和 offsetWidth 属性强制浏览器重新渲染。

改进后的 changeCur 方法逻辑：

当切换到最后一页时 ( cur === this.num )，先将 transitionDuration 设置为 0s 取消过渡动画，直接将 cur 设置为 0 (指向首图)。关键在于 this.con.offsetWidth; 这行代码，它强制浏览器重新计算布局，触发重新绘制，从而消除闪动。之后，再将 transitionDuration 恢复为 .3s，并将 cur 设置为 1，实现平滑过渡。

反向切换到首图的逻辑类似：将 transitionDuration 设置为 0s，cur 设置为 this.num + 1，访问 offsetWidth，最后将 cur 设置为 this.num，实现无闪动切换。

此方法通过控制动画过渡时间和强制浏览器重新渲染，有效避免了循环切换时的闪动，提升用户体验。它比使用 setTimeout 更可靠，关键在于巧妙运用 this.con.offsetWidth; 利用浏览器的渲染机制解决问题。