JavaScript实现页面轮播：滑动到末尾无法返回索引0问题求助

问题原因 #

你当前的代码核心问题有三个：

• 下页逻辑没有做首尾循环判断，滑动到最后一页后没有触发回到第一页的逻辑
• 上页的判断条件完全错误，也没有处理第一页往前跳转到最后一页的逻辑
• 切换页面时只处理了新页面的active类状态，没有清除上一个展示页面的active类，会出现多页面同时有active类重叠展示的问题

修复后的完整JS代码 #

const c1 = document.querySelector('.content-1');
const c2 = document.querySelector('.content-2');
const c3 = document.querySelector('.content-3');
const main = document.querySelector('.main');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');

const pages = [c1, c2, c3]
let i = 0;

// 抽离公共切换逻辑，避免重复代码
const switchPage = function(newIndex) {
  pages[i].classList.remove('active');
  i = newIndex;
  pages[i].classList.add('active');
}

const nextPage = function() {
  let newIndex = i + 1;
  // 到最后一页后自动回到第一页
  if(newIndex >= pages.length) {
    newIndex = 0;
  }
  switchPage(newIndex);
}

const prevPage = function() {
  let newIndex = i - 1;
  // 第一页往前跳转自动到最后一页
  if(newIndex < 0) {
    newIndex = pages.length - 1;
  }
  switchPage(newIndex);
}

next.addEventListener('click', nextPage)
prev.addEventListener('click', prevPage)

修改说明 #

1. 抽离了公共的页面切换方法，统一处理旧页面active清除和新页面active添加的逻辑，避免出现多页面同时高亮重叠的问题
2. 下页逻辑新增边界判断，当索引超过页面总数时重置为0，实现首尾循环跳转
3. 上页逻辑完全重写，判断索引小于0时重置为最后一页的索引，解决上滑失效的问题

内容的提问来源于stack exchange，提问作者KurtReyn