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];

这会给我一个我想要的确切图像元素。因为我的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.since的任何一个element by classname返回一个列表，这就是我这样做的原因。

如何在图像slider-javascript中获取当前图像的参考？

1 个答案: