模态图片画廊JS功能失效：点击图片无响应求助

问题概述 #

尝试六种方法实现模态图片画廊均失败，严格按照教程步骤操作（仅替换图片路径），图片显示、样式及hover缩放正常，但点击图片无反应。将JS从外部文件移到HTML主体内也没用，试过单张模态图方案可行但无法适配画廊，lightbox方案同样无效。

核心错误排查 #

你的JS代码存在语法错误，这是导致点击无响应的根本原因：

• nextBtn点击事件里的多余逗号：newImage.setAttribute("src",, nextImg()); 此处多了一个逗号，直接导致JS解析失败，整个脚本无法运行。
• 重复添加图片到模态框：imgModal函数中先执行modal.append(newImage);，后续又执行modal.append(newImage, closeBtn, nextBtn, prevBtn);，导致图片被重复添加。
• 导航按钮无视觉内容：使用angle-right/angle-left类但未引入对应图标库，按钮会显示为空（非功能问题，但影响体验）。

修正后的完整代码 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px 60px 0px;
}

.gallery {
  display: grid;
  width: 90%;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.gallery_item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.gallery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

.gallery_item img:hover {
  transform: scale(1.1);
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.9);
  margin-top: -1px;
  animation: zoom 0.3s ease-in-out;
}

@keyframes zoom {
  from {transform:scale(0);}
  to {transform:scale(1);}
}

.modal img {
  width: 50%;
  object-fit: cover; 
}

.closeBtn, .nextBtn, .prevBtn {
  color: rgba(255, 255, 255, 0.9);
  font-size: 25px;
  position: absolute;
  cursor: pointer;
  user-select: none;
}

.closeBtn {
  top: 0;
  right: 0;
  margin: 20px;
}

.nextBtn {
  right: 20px;
}

.prevBtn {
  left: 20px;
}
</style>

  </head>
  
  <body>


<div class="main">
  <h1>Gallery</h1>
  <div class="gallery">
    <div class="gallery_item">
      <img src="/pics/2016_11 chal revolution.png"/>
    </div>
    <div class="gallery_item">
      <img src="/pics/2016_11 chal space fall.png"/>
    </div>
    <div class="gallery_item">
      <img src="/pics/2016_11 chal.png"/>
    </div>
    <div class="gallery_item">
      <img src="/pics/2016_11 cute bobbydane.png"/>
    </div>
    <div class="gallery_item">
      <img src="/pics/2016_11 dane lip ring.png"/>
    </div>
    <div class="gallery_item">
      <img src="/pics/2016_11 esther amaden.png"/>
    </div>
  </div>
</div>

<script>
const images = document.querySelectorAll(".gallery_item img");
let imgIndex;
let imgSrc;

// 绑定图片点击事件
images.forEach((img, i) => {
  img.addEventListener("click", (e) => {
    imgSrc = e.target.src;
    imgModal(imgSrc);
    imgIndex = i;
  });
});

// 创建并渲染模态框
let imgModal = (src) => {
  const modal = document.createElement("div");
  modal.setAttribute("class", "modal");
  document.querySelector(".main").append(modal);

  // 创建模态框图片
  const newImage = document.createElement("img");
  newImage.setAttribute("src", src);

  // 创建关闭按钮
  const closeBtn = document.createElement("span");
  closeBtn.setAttribute("class", "closeBtn");
  closeBtn.textContent = "×";
  closeBtn.onclick = () => modal.remove();

  // 创建下一张按钮
  const nextBtn = document.createElement("span");
  nextBtn.setAttribute("class", "nextBtn");
  nextBtn.textContent = ">";
  nextBtn.onclick = () => newImage.setAttribute("src", nextImg());

  // 创建上一张按钮
  const prevBtn = document.createElement("span");
  prevBtn.setAttribute("class", "prevBtn");
  prevBtn.textContent = "<";
  prevBtn.onclick = () => newImage.setAttribute("src", prevImg());

  // 一次性添加所有元素到模态框
  modal.append(newImage, closeBtn, nextBtn, prevBtn);
};

// 下一张图片逻辑
let nextImg = () => {
  imgIndex++;
  if (imgIndex >= images.length) imgIndex = 0;
  return images[imgIndex].src;
};

// 上一张图片逻辑
let prevImg = () => {
  imgIndex--;
  if (imgIndex < 0) imgIndex = images.length - 1;
  return images[imgIndex].src;
};
</script>

</body>
</html>

优化说明 #

1. 修复JS语法错误，移除多余逗号
2. 用span标签替代i标签，直接添加文本符号作为按钮，无需依赖外部图标库
3. 移除重复添加图片的代码，优化DOM操作
4. 给导航按钮添加基础定位样式，确保可见性
5. 添加user-select: none避免按钮文本被选中

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