如何在图像滑块-javascript中获取当前图像的引用?

Question

我想获取当前预览的图像元素的详细信息，当用户使用滑块导航到图像时。

滑块.html：-

<div class="pop-box">
<div class="slideshow-container">
<div class="mySlides2 fade">
<img src="img/challenge-image.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides2 fade">
<img src="img/challenger-participation.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides2 fade">
<img src="img/banner.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides2 fade">
<img src="img/img-1.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides2 fade">
<img src="img/img-2.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides2 fade">
<img src="img/img-3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides2 fade">
<img src="img/people-first.jpg">
<div class="text">Caption Three</div>
</div>


<a class="prev" onclick="plusSlides2(-1)">&#10094;</a>
<a class="next" onclick="plusSlides2(1)">&#10095;</a>
</div>
</div>  

所以我想要的是当用户单击上一个或下一个按钮时，他们将从上面的列表中预览一些图像，我只想在每次点击时获取该图像元素的详细信息。

我的滑块.js：-

var slideIndex = 1;
showSlides2(slideIndex);
function plusSlides2(n) {
showSlides2(slideIndex += n);
}
function currentSlide2(n) {
showSlides2(slideIndex = n);
}
function showSlides2(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot2");
if (n > slides.length) {slideIndex = 1}    
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";  
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "flex";  
dots[slideIndex-1].className += " active";
}

Answer 1

实际上我发现我的问题有一半的解决方案，我只需要在我的滑块中添加这段代码.js

var ImgElement = slides[slideIndex-1].children[0];

这将给我我想要的确切图像元素。由于我的滑块.js：-

var slides = document.getElementsByClassName("mySlides2");
if (n > slides.length) {slideIndex = 1}    
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";  
}
slides[slideIndex-1].style.display = "flex"; 

所以在我的实际 html 代码中，我有不同的图像，这些图像在类myslides2下，我在滑块中所做的.js是在迭代图像时添加了style :"none"，循环结束后我添加了stye:"flex"到最后一个div，这是我的目标div，其中包含我想要的图像，所以最后我通过获取它的第一个元素 childeren 来做到这一点由于通过类名获取任何元素都会返回一个列表，所以这就是我以这种方式这样做的原因。