如何在圖像滑塊javascript中獲取當前圖像的引用？

Question

我想獲取圖像元素的詳細信息，當用戶使用滑塊導航到圖像時，該圖像元素當前預覽給用戶。

slider.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> 

所以，我要的是當用戶單擊上一日或下一個按鈕，然後他們會從上面的列表，我只是想獲得的細節得到一些圖像的預覽每點擊一次的圖像元素。

我slider.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

其實我發現我有我的問題解決方案的一半我只需要添加這段代碼在我slider.js

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

這能不能給我我want.Since我slider.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，以及我在我的slider.js做了什麼是我已經添加style :"none"，同時迭代我的圖像和循環結束後我添加stye:"flex"到最後div，這是我的目標div其中包含我想要的圖像，所以最後我通過獲取它的childeren來完成這個任務，它是array的第一個元素。因爲通過classname獲取任何元素都會返回一個列表，所以這就是爲什麼我這樣做的原因。