如何在jQuery自定义幻灯片中重置数组索引为0实现无限轮播

问题原因 #

你原有代码的核心问题是先操作DOM再修改索引，且没有提前处理索引边界，导致会访问arr[-1]、arr[3]这类不存在的数组成员，触发JS报错后逻辑中断，才会出现索引卡住、功能失效的情况。

修正后的完整JS代码 #

let prev = $(".prev");
let next = $(".next");
let arr = [$("#1"), $("#2"), $("#3")];
let index = 0;

prev.click(function(){
    // 先计算循环后的新索引，加arr.length避免负数取模异常
    let newIndex = (index - 1 + arr.length) % arr.length;
    // 切换类名：旧激活项改为down，新项改为active
    arr[index].removeClass("active").addClass("down");
    arr[newIndex].removeClass("down").addClass("active");
    // 更新索引
    index = newIndex;
});

next.click(function(){
    // 先计算循环后的新索引
    let newIndex = (index + 1) % arr.length;
    // 切换类名
    arr[index].removeClass("active").addClass("down");
    arr[newIndex].removeClass("down").addClass("active");
    // 更新索引
    index = newIndex;
    console.log(index);
});

关键修改说明 #

• 索引计算前置：所有边界处理放在DOM操作之前，保证永远只会访问数组存在的索引项，不会触发报错
• 取模运算实现无限循环：无需写多分支if判断，(index + 1) % arr.length 自动处理下一张到末尾回到0的逻辑；(index -1 + arr.length) % arr.length 处理上一张到开头回到最后一项的逻辑，加数组长度是为了避免负数取模得到异常值
• 类名操作顺序统一：先给当前激活的元素加down移除active，再给新的目标元素加active移除down，逻辑清晰不会出现类名覆盖错误

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