Javascript幻灯片数组问题

Question

我目前是 Javascript 的新手，我被这个问题困住了。 此代码的目标是在按下上一个和下一个按钮时循环浏览 3 种不同的文本（幻灯片）和图像（幻灯片）组合。 目前，当从数组中的元素 0 到 2 时，我的代码可以完美运行，无论是向上还是向下，但我需要在 [2] 元素处于活动状态并按下下一个按钮时将数组重置回 [0]，同时也将活动类赋予 [0] 并从 [2] 中移除活动类。 当 [0] 处于活动状态时按下前一个按钮时，我还需要数组执行相反的操作。 我已经尝试了一些解决方案的变体，但到目前为止还没有正确显示内容。

const slides = document.querySelectorAll(".slide");
const imgs = document.querySelectorAll(".slideimg");
const prevButton = document.getElementById("larrow");
const nextButton = document.getElementById("rarrow");

var currentSlide = 0;
slides[currentSlide].classList.add("active");
imgs[currentSlide].classList.add("active");

var nextSlide = function(){


    if(currentSlide < 2) {
        currentSlide+=1;
    }

    slides[currentSlide - 1].classList.remove("active");
    slides[currentSlide].classList.add("active");
    imgs[currentSlide - 1].classList.remove("active");
    imgs[currentSlide].classList.add("active");
};

var prevSlide = function(){
    if(currentSlide > 0){
        currentSlide--;
    }

    slides[currentSlide].classList.add("active");
    slides[currentSlide + 1].classList.remove("active");
    imgs[currentSlide].classList.add("active");
    imgs[currentSlide + 1].classList.remove("active");
};

nextButton.addEventListener("click", nextSlide);
prevButton.addEventListener("click", prevSlide);

Answer 1

最初从当前幻灯片中删除active 。 然后通过添加 1 并使用模来更改currentSlide ：

const nextSlide = function () {
    slides[currentSlide].classList.remove('active');
    imgs[currentSlide].classList.remove('active');

    currentSlide = (currentSlide + 1) % 3;

    slides[currentSlide].classList.add('active');
    imgs[currentSlide].classList.add('active');
};

对prevSlide执行相同的prevSlide ，除了将currentSlide分配更改为：

currentSlide = (currentSlide + 2) % 3;

（ + 2执行与- 1相同的逻辑类型，除了当幻灯片从 0 开始时它会落在正确的数字上。Modulo 在负数上不会按预期工作； -1 % 2给你-1 , 不是2 )