javascript - 轮播循环时候为什么会出现闪动？

Question

如demo中所示的轮播图，使用下一页切换，在最后一页切换到第一页面时候，即循环切换时候，如果点击较慢(或多点几次)，图片会出现闪动，为什么轮播回退会出现闪动？使用的是translate3d来移动的

Answer 1

初步判断是点击过快导致的页面渲染不及时产生的闪烁，开控制台高亮轮播图可以看的更明显，我个人没啥解决闪烁的办法，但解决办法倒是简单，禁止按钮连点就行。
但轮播图一般不用你这种方法做，常见做法是复制一份追加到后面，形成"首尾链接"，然后当轮播暂停的时候，把复制的"首"换成真正的首。
而且，直接用现有的库是个更好的解决方案，比如swiper
学习研究也不错

Answer 2

我重写了一下changeCur方法。另外您这个轮播 其实有很简单的方法就是直接利用transform去做 ，那样简单明白。

 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){                    // this.setCur(cur+1);                    // if(cur > this.num-1){                    //     setTimeout(() => {                    //         // cur = 1;                    //         // this.out.style.setProperty('--trans', 'none');                    //         this.con.style.transitionDuration = '0s';                    //         this.setCur(1);                    //     }, 300)                    // }                   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{                    // this.setCur(cur-1);                    // if(cur < 2){                    //     // setTimeout(() => {                    //     //     // cur = this.num;                    //     //     // this.out.style.setProperty('--trans', 'none');                    //     //     this.con.style.transitionDuration = '0s';                    //     //     this.setCur(this.num);                    //     // }, 300)                    // }                    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);                    }                }            }

Answer 3

轮播图在循环切换时出现闪动的原因可能有很多，但常见的原因通常与以下几个因素有关：

1. CSS 动画或过渡效果：如果轮播图使用了 CSS 动画或过渡效果（如 transition），那么在轮播图切换时，如果动画或过渡的结束状态没有正确设置，或者切换逻辑不够平滑，就可能导致闪动。
2. 图片加载：如果轮播图中的图片不是预加载的，那么在切换时图片可能需要重新加载，这可能导致短暂的闪动。
3. DOM 操作：如果在轮播图切换的过程中有大量的 DOM 操作，如移除和添加图片元素，这也可能导致页面重绘和闪动。
4. 浏览器渲染：浏览器的渲染机制也可能导致闪动。例如，如果浏览器在渲染新图片时还没有完全完成前一个图片的渲染，就可能出现闪动。
5. 循环逻辑问题：在轮播图循环切换时，如果逻辑处理不当，例如没有正确地处理最后一个元素到第一个元素的过渡，也可能导致闪动。

在你提供的例子中，使用了 translate3d 来移动图片。虽然 translate3d 通常会触发 GPU 加速来提高性能，但如果切换逻辑或动画处理不当，仍然可能出现闪动。

要解决这个问题，你可以尝试以下方法：

• 优化动画和过渡效果：确保动画和过渡效果的开始和结束状态都是平滑的，并且切换逻辑是连续的。
• 预加载图片：确保所有轮播图中的图片都已经预加载完成，避免在切换时因为图片加载导致的闪动。
• 减少 DOM 操作：尽量避免在轮播图切换时进行大量的 DOM 操作。如果必须操作 DOM，可以尝试使用文档片段（DocumentFragment）或离屏 canvas 来减少重绘次数。
• 检查循环逻辑：确保循环切换的逻辑是正确的，特别是从最后一个元素切换到第一个元素时的处理。

如果以上方法仍然无法解决问题，你可能需要更深入地检查你的代码和逻辑，或者考虑使用现成的轮播图库来避免这类问题。