连接图库下一个和前一个兄弟

Question

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

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>