我正在模态窗口中制作幻灯片！首先，我单击网站上的 12 张图像之一...然后打开模态窗口，其中包含一个带有幻灯片的窗口...我单击的图片 (img) 应该被视为（作为背景图像）作为幻灯片中的第一张图片。网页上的图片在一个id为pic_cnt的div中
在模态幻灯片窗口 (id modal_window) 的 div 中有 12 个 div（对于每张图片），类 modal_pic！具有此类的每个 div 都具有与网页上的 img 顺序相同的背景图像，但不透明度为 0。
我在打开模态窗口的页面上的每个 img 中添加了一个事件侦听器！如何将单击的 img 与相同的背景图像连接起来？当一个 img 被点击时，应该在模态窗口中添加一个类（.current）到相同的背景图像以将不透明度更改为 1。请帮忙！
let modal = document.getElementById('modal');
let clickedPic = document.querySelectorAll('#pic_cnt img');
let modalPic = document.querySelectorAll('#modal_window div');
for (let i = 0; i < clickedPic.length; i++) {
clickedPic[i].addEventListener('click', openModal)
}
function openModal() {
modal.style.display = "block";
}#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(1, 1, 1, .8);
}
#modal_window {
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 55%;
width: 55%;
}
.modal_pic {
width: 100%;
height: 100%;
;
position: absolute;
opacity: 0;
}
.current {
opacity: 1;
}<section id="pictures">
<div id="pic_cnt">
<div><img src="Images/18.jpg"></a>
</div>
<div><img src="Images/5.jpg"></a>
</div>
<div><img src="Images/6.jpg"></a>
</div>
<div><img src="Images/14.jpg"></a>
</div>
<div><img src="Images/16.jpg"></a>
</div>
<div><img src="Images/19.jpg"></a>
</div>
<div><img src="Images/9.jpg"></a>
</div>
<div><img src="Images/17.jpg"></a>
</div>
<div><img src="Images/3.jpg"></a>
</div>
<div><img src="Images/15.jpg"></a>
</div>
<div><img src="Images/7.jpg"></a>
</div>
<div><img src="Images/10.jpg"></a>
</div>
</div>
<div id="modal">
<div id="modal_window">
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
<div class="modal_pic"></div>
</div>
</div>
</section>在事件侦听器中，this是您单击的元素。您可以获取父DIV，然后获取其在pic_cntDIV 中的索引，然后使用该索引在模态中找到对应的DIV。
let modal = document.getElementById('modal');
let clickedPic = document.querySelectorAll('#pic_cnt img');
let modalPic = document.querySelectorAll('#modal_window div');
for (let i = 0; i < clickedPic.length; i++) {
clickedPic[i].addEventListener('click', openModal)
}
function openModal() {
modal.style.display = "block";
let index = Array.from(this.parentElement.parentElement.children).indexOf(this.parentElement);
console.log(index);
for (let i = 0; i < modalPic.length; i++) {
modalPic[i].style.opacity = i == index ? 1 : 0;
}
}#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(1, 1, 1, .8);
}
#modal_window {
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 55%;
width: 55%;
}
.modal_pic {
width: 100%;
height: 100%;
;
position: absolute;
opacity: 0;
}
.current {
opacity: 1;
}<section id="pictures">
<div id="pic_cnt">
<div><img src="Images/18.jpg"></a>
</div>
<div><img src="Images/5.jpg"></a>
</div>
<div><img src="Images/6.jpg"></a>
</div>
<div><img src="Images/14.jpg"></a>
</div>
<div><img src="Images/16.jpg"></a>
</div>
<div><img src="Images/19.jpg"></a>
</div>
<div><img src="Images/9.jpg"></a>
</div>
<div><img src="Images/17.jpg"></a>
</div>
<div><img src="Images/3.jpg"></a>
</div>
<div><img src="Images/15.jpg"></a>
</div>
<div><img src="Images/7.jpg"></a>
</div>
<div><img src="Images/10.jpg"></a>
</div>
</div>
<div id="modal">
<div id="modal_window">
<div class="modal_pic">Pic 1</div>
<div class="modal_pic">Pic 2</div>
<div class="modal_pic">Pic 3</div>
<div class="modal_pic">Pic 4</div>
<div class="modal_pic">Pic 5</div>
<div class="modal_pic">Pic 6</div>
<div class="modal_pic">Pic 7</div>
<div class="modal_pic">Pic 8</div>
<div class="modal_pic">Pic 9</div>
<div class="modal_pic">Pic 10</div>
<div class="modal_pic">Pic 11</div>
<div class="modal_pic">Pic 12</div>
</div>
</div>
</section>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句