禁用特定幻灯片上的按钮

Question

我已经把它变成了一个有两个图像的滑块，第一个是 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

代码笔：https://codepen.io/andrei-nistor/pen/ZEeeGEG

Answer 1

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

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

的示例

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';
    }
}

禁用特定幻灯片上的按钮

Disable button on specific slide

javascript

css

slide

carousel