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 )