如何解决轮播图最后一页切换到第一页时的闪动问题？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何解决轮播图最后一页切换到第一页时的闪动问题？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

轮播回退时的闪动问题

在使用轮播图时，在最后一页切换到第一页时，可能会出现闪动现象。这是因为在使用 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);
  }
}

今天关于《如何解决轮播图最后一页切换到第一页时的闪动问题？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！