JS实现画廊模态框前后切换按钮无法连续跳转问题求助

你写的切换逻辑存在两个核心问题：

• 每次点击切换按钮时，仅修改了资源的显示状态，没有更新全局索引g的取值，g一直保留着模态框首次打开时的初始索引值，所以只能完成一次切换
• 没有做索引边界校验，索引溢出时会引发逻辑报错，同时关闭模态框时没有重置相关状态，导致下次打开时索引错乱

核心逻辑修改 #

每次切换资源后同步更新g的值，同时增加边界校验，你可以根据需求选择普通边界限制或者循环滚动效果。

循环滚动效果（到首尾自动跳转） #

修改后的上一张按钮逻辑：

$("#previous").addEventListener("click", evt => {
    slides[g].style.display = "none";
    // 索引到0时自动跳转到最后一个资源
    g = g - 1 < 0 ? slides.length - 1 : g - 1;
    slides[g].style.display = "initial";
});

修改后的下一张按钮逻辑：

$("#next").addEventListener("click", evt => {
    slides[g].style.display = "none";
    // 索引到最后一个时自动跳转到第一个资源
    g = g + 1 >= slides.length ? 0 : g + 1;
    slides[g].style.display = "initial";
});

普通边界限制（到首尾后点击无响应） #

如果不需要循环滚动，可以用这个版本：

$("#previous").addEventListener("click", evt => {
    if (g <= 0) return;
    slides[g].style.display = "none";
    g = g - 1;
    slides[g].style.display = "initial";
});

$("#next").addEventListener("click", evt => {
    if (g >= slides.length - 1) return;
    slides[g].style.display = "none";
    g = g + 1;
    slides[g].style.display = "initial";
});

额外补充 #

你提到的关闭模态框后重新打开展示错误资源的问题，需要在打开模态框的逻辑里，每次点击素材打开时都重新给g赋值为当前点击素材对应的索引，不要沿用之前切换后残留的g值即可解决。

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