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

wufei123 2025-01-26 阅读:39 评论:0

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

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

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

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

解决方法

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

修改后的 changeCur 方法：

PHP

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);
                    }

                }
            }