javascript 无法使JS在模态图像库上工作

我试过六种不同的方法来解决这个问题，但是没有一种奏效，我开始感到非常沮丧。我知道这绝对是新手的事情，但我不在乎。
我正在尝试用模态图像制作一个艺术画廊，我已经完全按照this tutorial的要求做了，实际上只是切换了实际的图像文件/路径，但是它不起作用。图像显示得很好，样式也很好，当我把鼠标悬停在它们上面时，它们会发生变化，但是当我真正点击它们时，什么也没发生。我已经把JS代码从它自己的链接文件移到了主html文件的主体中，什么也没改变。我尝试了几种不同的方法，包括“官方”W3Schools教程，虽然它成功地为我提供了一个单一模式的图片，但它拒绝为画廊工作。我在同一个网站上尝试了lightbox，它也不起作用。我想坚持使用与上面链接的格式相似的格式，但老实说，在这一点上，我准备把我的笔记本电脑扔进河里。
拜托，谁来告诉我我做错了什么。
以下是我目前为止的代码，包括css（运行良好）和拒绝执行任何操作的js：

<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 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
}

.closeBtn:hover {
  cursor: pointer;
}
</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;
//get images src onclick
images.forEach((img, i) => {
  img.addEventListener("click", (e) => {
    imgSrc = e.target.src;
    console.log(imgSrc);
    //run modal function
    imgModal(imgSrc);
    //index of the next image
    imgIndex = i;
  });
});

//creating the modal
let imgModal = (src) => {
  const modal = document.createElement("div");
  modal.setAttribute("class", "modal");
  //add the modal to the main section or the parent element
  document.querySelector(".main").append(modal);
  //adding image to modal
  const newImage = document.createElement("img");
  newImage.setAttribute("src", src);
  modal.append(newImage);
  //creating the close button
  const closeBtn = document.createElement("i");
  closeBtn.setAttribute("class", "closeBtn");
  //close function
  closeBtn.onclick = () => {
    modal.remove();
  };
  //next and previous buttons
  const nextBtn = document.createElement("i");
  nextBtn.setAttribute("class", "angle-right nextBtn");
  //chenge the src of current image to the src of next image
  nextBtn.onclick = () => {
    newImage.setAttribute("src",, nextImg());
  };
  const prevBtn = document.createElement("i");
  prevBtn.setAttribute("class", "angle-left prevBtn");
  //change the src of current image to the src of previous image
  prevBtn.onclick = () => {
    newImage.setAttribute("src", prevImg());
  };
modal.append(newImage, closeBtn, nextBtn, prevBtn);
};
//next image function
let nextImg = () => {
  imgIndex++;
  //check if it is the last image
  if (imgIndex >= images.length) {
    imgIndex = 0
  }
  //return src of the new image
  return images[imgIndex].src;
};
//previous image function 
let prevImg = () => {
  imgIndex--;
  console.log(imgIndex);
  //check if it is the first image
  if (imgIndex < 0) {
    imgIndex = images.length - 1;
  }
  //return src of previous image
  return images[imgIndex].src
}

</script>

</body>
</html>

javascript 无法使JS在模态图像库上工作

1条答案

相关问题

热门标签

最新问答