Question

救救我！点击点我需要显示幻灯片。我应该提一下，我需要在纯JavaScript中使用它。这是代码：Slider in JavaScript

<!-- Slider -->
<div class="slider">
    <img src="https://istanbulclues.com/wp-content/uploads/2016/07/Istanbul-Blue-Mosque-Overview-690x460.jpg" alt="Istanbul" class="img js-show">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=http%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1600x1000%2Fpublic%2F1513186027%2Fmadrid-spain-EUROPEROUTES1217.jpg%3Fitok%3DcBB6JhNC&w=700&q=85" alt="Madrid" class="img">
    <img src="http://2.bp.blogspot.com/-d20p7uaz2pQ/U1o7H7Dc1FI/AAAAAAAADwg/Pr85OY1B1jo/s1600/capilano-004.jpg" alt="Capilano" class="img">
    <img src="https://positivr.fr/wp-content/uploads/2015/08/recyclage-dechets-san-francisco-1.jpg" alt="San Francisco" class="img">
    <img src="https://www.muskimagazin.rs/image.php/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg?width=600&image=https://www.muskimagazin.rs/chest/gallery/barselona-top-destinacija/muski-magazin-putovanja-barselona-top-destinacija%20(12).jpg"  alt="Barselona" class="img">

    <button class="arrow prev"><i class="fas fa-chevron-left"></i></button>
    <button class="arrow next"><i class="fas fa-chevron-right"></i></button>

    <!-- Dots -->
    <ul class="dots">
        <li class="dot current"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        <li class="dot"></li>
    </ul>
</div>

Answer 1

我认为您只需要闭包来获取点击了哪个点元素的索引，然后就可以将当前幻灯片切换到索引。我刚刚在代码中的for循环中更改了这个。

// click on dots change slide and dot
for (var i = 0; i < dots.length; i++) {
 (function(index){
    dots[i].onclick = function() {
      if (index !== currentSlide) {
        document.querySelector('.dot.current').classList.remove('current');
        this.classList.add('current');
        document.querySelector('.img.js-show').classList.remove('js-show');
        slides[index].classList.add('js-show');
        currentSlide = index;
      }
   }
 })(i);
}

希望这有帮助！

如何通过单击纯JavaScript中的点来更改幻灯片？

1 个答案: