Javascript幻灯片数组问题答案

【问题标题】：Javascript slideshow array issuesJavascript幻灯片数组问题
【发布时间】：2021-02-20 21:02:48
【问题描述】：

我目前是 Javascript 的新手，我被这个问题困住了。这段代码的目标是在按下上一个和下一个按钮时循环通过单独的文本（幻灯片）和图像（幻灯片）的 3 种不同组合。目前，当从数组中的元素 0 向上和向下移动时，我的代码运行良好，但是我需要在 [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);

【问题讨论】：

标签： javascript html css arrays

【解决方案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 执行相同操作，除了将currentSlide 分配更改为：

currentSlide = (currentSlide + 2) % 3;

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

【讨论】：