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

Question

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

Answer 1

我重写了一下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 2

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