模态画廊prev/next按钮失效及切换图片随机显示问题求助

问题根因 #

• 核心逻辑错位：原代码将模态内部的.slide元素集合（实际仅1个元素）作为轮播目标列表，没有维护全量画廊图片的数据源，导致索引计算完全脱离实际图片顺序
• 索引同步缺失：点击非第8张图打开模态时，仅依赖每个缩略图onclick里手动写入的toSlide(n)参数绑定索引，没有和当前点击图片的真实位置做校验，切换时的索引计算没有对应图片列表的实际位置。之所以第8张图打开时功能正常，是因为手动写入的索引刚好和当时的错误列表长度计算值匹配，其他图片的索引没有和实际图片位置对齐，导致切换时出现随机跳图的情况
• 边界逻辑适配错误：因为目标列表长度统计错误，循环跳转的阈值和实际图片数量不匹配
• DOM结构错误：原HTML末尾存在冗余的闭合div标签，导致元素层级解析错位，进一步放大功能异常

修复方案 #

• 建立全局图片数据源：页面加载完成后，收集所有带.preview类的缩略图src值，存入数组galleryImages作为轮播的唯一权威数据源
• 简化绑定逻辑：移除每个缩略图onclick里手动写入的toSlide(n)参数，仅保留openLightbox(this)调用，由openLightbox自动识别当前点击图片在列表中的真实索引
• 重构显示逻辑：showSlide函数不再操作模态内的.slide元素集合，直接根据当前slideIndex从galleryImages中取对应图片的src，赋值给模态内的img元素
• 修正边界循环：基于galleryImages.length做轮播边界判断，当索引超出范围时自动跳转回首尾

修正后的核心JS代码 #

// 全局存储全量画廊图片src
let galleryImages = [];
let slideIndex = 0;

// 页面加载完成后初始化图片列表
window.addEventListener('DOMContentLoaded', () => {
  const previews = document.querySelectorAll('.preview');
  previews.forEach(img => {
    galleryImages.push(img.src);
  });
});

function openLightbox(element) {
  document.getElementById('Lightbox').style.display = 'block';
  // 自动识别当前点击图片的真实索引，同步给slideIndex
  slideIndex = galleryImages.indexOf(element.src);
  showSlide();
}

function closeLightbox() {
  document.getElementById('Lightbox').style.display = 'none';
}

function changeSlide(n) {
  slideIndex += n;
  showSlide();
}

function showSlide() {
  const total = galleryImages.length;
  // 边界循环处理
  if (slideIndex >= total) slideIndex = 0;
  if (slideIndex < 0) slideIndex = total - 1;
  // 直接给模态图赋值对应src
  document.getElementById('modal-slides').src = galleryImages[slideIndex];
}

注意事项 #

• 移除缩略图标签上冗余的toSlide(1)这类手动参数，避免和自动识别的索引冲突
• 删掉HTML末尾多余的</div>闭合标签，保证DOM结构层级正确
• 轮播逻辑全程基于galleryImages的索引计算，不再依赖模态内部的slide元素计数，从根源上避免索引错位

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