轮播图快速切换闪动怎么办？

轮播图循环切换闪动问题详解

在使用 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 {
        // ...原有代码
    }
}

以上就是轮播图快速切换闪动怎么办？的详细内容，更多请关注其它相关文章！