页面中多个Modals显示相同图片的技术问题咨询

我太懂这种踩坑的感觉了！你遇到的这个问题，核心原因几乎都是修改原示例时，没处理好图片和对应幻灯片/弹窗的绑定关系，咱们一步步来解决：

问题根源分析 #

原Lightbox示例是单组图片共用一个弹窗，所有幻灯片都放在同一个modal容器里。如果你是想给每张图片做独立弹窗，或者修改时没更新索引逻辑，就会导致所有弹窗都调用同一组幻灯片，自然显示同一张图。

具体修复方案 #

方案1：多组独立弹窗（每张图对应自己的modal） #

如果你的需求是点击不同图片弹出不同的独立弹窗，要做这几步：

• 给每个modal设置唯一ID，比如id="modal-1"、id="modal-2"，每个modal里只放对应图片的幻灯片
• 修改图片的点击事件，传递分组标识：

  <img src="img_nature.jpg" onclick="openModal('1');currentSlide(1, '1')" class="hover-shadow cursor">
  <img src="img_mountains.jpg" onclick="openModal('2');currentSlide(1, '2')" class="hover-shadow cursor">
  

• 更新JS函数，让它能识别不同分组：

  function openModal(groupId) {
    document.getElementById(`modal-${groupId}`).style.display = "block";
  }
  
  function currentSlide(n, groupId) {
    showSlides(slideIndex = n, groupId);
  }
  
  function showSlides(n, groupId) {
    let i;
    const slides = document.querySelectorAll(`#modal-${groupId} .mySlides`);
    const dots = document.querySelectorAll(`#modal-${groupId} .demo`);
    const captionText = document.getElementById(`caption-${groupId}`);
    
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
  }
  

  注意每个modal里的caption元素也要对应唯一ID，比如id="caption-1"

方案2：单弹窗多图片（所有图片共用一个弹窗，点击显示对应图） #

如果你的需求是保留原示例的单弹窗，只是修改后索引逻辑出错，检查这几点：

• 确保每个.mySlides里的图片src是正确的，没有都写成同一张图的路径
• 检查currentSlide()函数的索引传递是否正确：点击第N张图时，要传递对应的N值，比如第一张图传1，第二张传2，以此类推
• 确认所有幻灯片都放在同一个modal里，没有被错误拆分

额外提示 #

修改时尽量保留原示例的核心逻辑，只针对自己的需求调整绑定关系，不要盲目删除或修改JS里的索引判断逻辑，很容易导致索引混乱。

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