禁用特定幻灯片上的按钮

Question

我已经把它做成了一个有 2 张图片的滑块，第一个是 Gotrade，第二个是 Midas。我希望当我在第一张幻灯片上时不显示左箭头，而当我在第二张幻灯片上时不显示右箭头。

 if (firstSlide.classList.contains('active-slide')) {
 buttonLeft.style.display = 'none';
 buttonRight.style.display = 'flex';
} else if (secondSlide.classList.contains('second-slide')) {
 buttonLeft.style.display = 'flex';
 buttonRight.style.display = 'none';
}

我试过了，但没有用。 这是图片供参考
https://i.stack.imgur.com/lTXdt.png
https://i.stack.imgur.com/82clB.png

Codepen：https://codepen.io/andrei-nistor/pen/ZEeeGEG

Answer 1

您的代码有几个问题。例如，您正在检查一个名为 active-slide 的类名，但您的代码中没有任何内容设置具有该名称的类。如果您从其他来源复制和粘贴代码而没有花一些时间来理解它，则可能无法调试。

您可以检查您所在的幻灯片编号，而不是检查是否存在不存在的类，并检查您是在第一张还是最后一张幻灯片上。您还需要在幻灯片转换后运行此代码，而不是像 Codepen 中显示的那样在程序结束时运行一次。这是一个工作 Javascript 检查slideIndex 而不是类的示例：

var slideIndex = 1;

let firstSlide = document.querySelector('.first-slide');
let secondSlide = document.querySelector('.second-slide');
let buttonLeft = document.querySelector('.prev');
let buttonRight = document.querySelector('.next');

showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";

    if (slideIndex === 1) {
        buttonLeft.style.display = 'none';
        buttonRight.style.display = 'flex';
    } else if (slideIndex === slides.length) {
        buttonRight.style.display = 'none';
        buttonLeft.style.display = 'flex';
    }
}