轮播回退时的闪动问题
在使用轮播图时,在最后一页切换到第一页时,可能会出现闪动现象。这是因为在使用 translate3d 进行移动时,在切换最后一页到第一页时,元素的位置会有一个从 100% 到 0% 的跳跃,从而产生闪动。
解决这个问题的方法是修改页面切换方法 changecur,在最后一页切换到第一页时,设置一个短时间的过渡延迟,并在延迟结束后再设置当前页为第一页。这样,元素的位置就会平滑移动,从而消除闪动。
以下是对 changecur 方法的修改:
changeCur(add){ // ...省略其他代码... // 切换最后一页到第一页时,设置延迟过渡 if (cur === this.num && add) { this.con.style.transitionDuration = '0s'; this.setCur(0); this.con.offsetWidth; // 触发重新渲染 this.con.style.transitionDuration = '.3s'; this.setCur(1); } // 切换第一页到最后一页时,设置延迟过渡 else if (cur === 1 && !add) { 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(add ? cur + 1 : cur - 1); } }