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

作者站长头像
站长
· 阅读数 7

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

回复
1个回答
avatar
test
2024-06-19

我重写了一下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);
                    }

                }
            }
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容