连接图库的下一个和上一个兄弟

Question

我尝试创建一个图库，如果你点击图片，然后会显示一个新的模型框，在这个 window 中有下一步和后退按钮但是它不起作用

console.log("jdkf");

var expandImg = document.getElementById("expandedImg");
let img = document.getElementsByClassName("pic");
let contener = document.getElementById("container");

for (let i = 0; i < img.length; i++) {
  img[i].addEventListener("click", (event) => {
    let cur = event.target;
    contener.style.display = "block"
    expandImg.src = cur.src;

  })
}

function next() {
  img[i].nextSibling
}
function back() {
  img[i].previousSibling
}

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.pic.active {
  opacity: 0.5;
}

.pic-large {
  cursor: pointer;
}

#expandedImg {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}


/* The expanding image container */

.container {
  display: none;
  /* Hidden by default عكسها block */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(252, 252, 252);
  /* Fallback color */
  background-color: rgba(255, 255, 255, 0.8);
  /* Black w/ opacity */
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #000;
  font-size: 35px;
  cursor: pointer;
}

#btn {
  position: absolute;
  top: 80%;
  left: 50%;
  z-index: 2;
}

<div class="container" id="container">
  <div id="btn">
    <input type="button" value="Next" onclick="next()" id="next">
    <input type="button" value="previous" onclick="back()" id="back">

  </div>

  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg">
  <div id="imgtext"></div>
</div>


<div id="content">
  <img class="pic active" src="https://picsum.photos/id/200/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/400/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/201/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/450/200/200" alt="">
</div>

Answer 1

我想你想要这样的东西

图片从服务器加载不快存在一些问题，但代码应该可以工作

const expandImg = document.getElementById("expandedImg");
const imgs = document.querySelectorAll(".pic");
const imgText = document.getElementById("imgtext");
const container = document.getElementById("container");

let cur = 0;
container.addEventListener("click", (event) => {
  const tgt = event.target;
  if (tgt.classList.contains("closebtn")) {
    container.classList.add("hide")
    return;
  }
  const dir = tgt.id === "next" ? 1 : -1;
  cur += dir;
  if (cur < 0) cur = 0;
  if (cur >= imgs.length) cur = imgs.length - 1;
  expandImg.src = imgs[cur].src;
  imgText.textContent = imgs[cur].alt;
})

document.getElementById("content").addEventListener("click", (event) => {
  cur = event.target.dataset.idx
  container.classList.remove("hide")
})

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.pic.active {
  opacity: 0.5;
}

.pic-large {
  cursor: pointer;
}

#expandedImg {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}


/* The expanding image container */

.container {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(252, 252, 252);
  /* Fallback color */
  background-color: rgba(255, 255, 255, 0.8);
  /* Black w/ opacity */
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #000;
  font-size: 35px;
  cursor: pointer;
}

#btn {
  position: absolute;
  top: 80%;
  left: 50%;
  z-index: 2;
}

.hide {
  display: none;
}

<div class="container hide" id="container">
  <div id="btn">
    <input type="button" value="Previous" id="prev">
    <input type="button" value="Next" id="next">
  </div>

  <span class="closebtn">&times;</span>
  <img id="expandedImg" src="">
  <div id="imgtext"></div>
</div>


<div id="content">
  <img class="pic active" data-idx="0" src="https://picsum.photos/id/200/200/200" alt="Picture 1">
  <img class="pic" data-idx="1" src="https://picsum.photos/id/400/200/200" alt="Picture 2">
  <img class="pic" data-idx="2" src="https://picsum.photos/id/201/200/200" alt="Picture 3">
  <img class="pic" data-idx="3" src="https://picsum.photos/id/450/200/200" alt="Picture 4">
</div>

连接图库的下一个和上一个兄弟

Connect Gallery next and previous sibling

javascript

css

gallery