轮播图循环切换时如何避免图片闪动？

轮播循环切换时的闪动现象探析

在使用轮播图组件时，当用户从最后一页切换到第一页时，可能会遇到图片闪动的问题。这种现象的产生，源于循环切换时的处理方式。

该轮播组件使用 translate3d 进行移动，在循环切换时，当达到最后一页后，直接切换到第一页。这种简单的切换方式会导致页面的瞬时跳动，即闪动。

解决方案

为了解决此问题，可以重写 changecur 方法，并在其中进行优化处理。如下所示：

changeCur(add){
    // 省略其他代码

    // 当到达最后一页时，先将过渡时间设为 0，然后跳到第一页，再将过渡时间还原。
    if (cur === this.num) {
        this.con.style.transitionDuration = '0s';
        this.setCur(0);
        this.con.offsetWidth;
        this.con.style.transitionDuration = '.3s';
        this.setCur(1);
    }

    // 省略其他代码
}

通过这种优化，可以消除轮播循环切换时的闪动现象。

以上就是轮播图循环切换时如何避免图片闪动？的详细内容，更多请关注其它相关文章！