轮播图最后一页切换到第一页会闪动的原因是什么？如何解决？

轮播循环时出现闪动的原因追溯

在轮播图中使用 translate3d 进行下一页切换时，最后一页切换到第一页时会出现闪动现象。这是因为在最后一页向后切换时，元素在瞬间已经移动到了第一页的位置，但是在过渡动画完成之前，浏览器会继续尝试以最后一页的样式渲染元素，导致视觉上的闪动。

解决方法

为了解决闪动问题，可以修改 changeCur 方法，在最后一页向后切换时，先将过渡时间设为 0s，使元素立即移动到第一页位置，然后将过渡时间恢复为 .3s，再设置当前页码为 1。这样，浏览器在过渡动画完成之前就不会尝试渲染最后一页的样式了。

修改后的 changeCur 方法：

changeCur(add) {
                // this.out.style.setProperty('--trans', 'transform');
                this.con.style.transitionDuration = '.3s';

                //切换cur方法
                let cur = this.out.style.getPropertyValue('--cur');
                cur = parseInt(cur);

                if (add) {
                    if (cur === this.num) {
                        this.con.style.transitionDuration = '0s';
                        this.setCur(0);
                        this.con.offsetWidth;
                        this.con.style.transitionDuration = '.3s';
                        this.setCur(1);

                    } else {
                        this.setCur(cur + 1);
                    }

                } else {
                    if (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 {
                        this.setCur(cur - 1);
                    }

                }
            }

简化轮播实现

除了上述修改，还可以采用更简单的方法实现轮播功能，直接使用 transform 进行图片切换，简化代码逻辑和渲染流程。

以上就是轮播图最后一页切换到第一页会闪动的原因是什么？如何解决？的详细内容，更多请关注硕下网其它相关文章！