Question

我用三张图片制作了这个香草js图像滑块。在html中，滑块底部有三个指示点，活动指示器有一个css活动类。无法弄清楚如何让课程添加到幻灯片放映的当前幻灯片中，有什么帮助吗？

let sliderImages = document.querySelectorAll('.slides'),
    prevArrow = document.querySelector('#prevBtn'),
    nextArrow = document.querySelector('#nextBtn'),
    dots = document.querySelectorAll('.indicator__dot'),
    current = 0;


reset = () => {
    for(let i = 0; i <sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }

}

startSlide = () => {
    reset();
    sliderImages[0].style.display = 'block'
}

prevSlide = () => {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current -- ;
}

nextSlide = () => {
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++;
}


prevArrow.addEventListener('click', () => {
    if(current === 0 ) {
        current = sliderImages.length;
    }
    prevSlide();
});

nextArrow.addEventListener('click', () => {
    if(current === sliderImages.length - 1 ) {
        current = -1
    }
    nextSlide();

});


startSlide()

Answer 1

不，对不起，我应该更清楚，并包含一些HTML。我在滑块底部有3个点。当幻灯片1是当前图像时，第一个点将添加css类，当第二个图像显示第二个图像时将具有活动类并且第一个点将不再具有。希望更有意义吗？

<div class="indicator">
     <span class="indicator__dot">&nbsp</span>
     <span class="indicator__dot">&nbsp</span>
     <span class="indicator__dot">&nbsp</span>
</div>

Answer 2

没有测试过，所以可能有一些错误。 setAnchor()功能会重置所有点，并将active类添加到current点。

setAnchor = () => {
  for(let i = 0; i <dots.length; i++) {
    sliderImages[i].classList.remove("active");

    if(current === i){
      sliderImages[i].classList.add("active");
    }
  }
}

startSlide = () => {
    reset();
    sliderImages[current].style.display = 'block'
    setAnchor();
}

prevSlide = () => {
    reset();
    current -- ;
    sliderImages[current].style.display = 'block';
    setAnchor();
}

nextSlide = () => {
    reset();
    current++;
    sliderImages[current].style.display = 'block';
    setAnchor();
}

如何获得滑动指标以匹配当前幻灯片？

2 个答案: