无法确定此功能的工作原理

Posted 2021-04-12

我在这里有一些全屏图像滑块教程的代码，我理解一个部分旁边的所有代码重置函数中的滑块！这让我很困惑

current===sliderImages.length -1

然后

current = -1;

这是代码

let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

// Clear all images
function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = "none";
    }
}

// Init slider
function startSlide() {
    reset();
    sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "block";
    current--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
});

// Show next
function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "block";
    current++;
}

                        THIS FUNCTION I DONT UNDERSTAND HOW IT WORKS
// Right arrow click    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
arrowRight.addEventListener("click", function () {
  !!!!  if (current === sliderImages.length - 1) {  
        current = -1;!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    }
    slideRight();
});

startSlide();

答案

if语句检查current是否是最后一个元素。如果代码仍然在此条件之后运行，那么当前将等于length的sliderImages并且它将是undefined，因为数组的最后一个元素的索引总是等于数组的长度减去1

if (current === sliderImages.length - 1) 

如果您已到达最后一张图像，则将current更改为-1。现在你可能会问为什么它设置为-1。数组索引从0开始。这是因为在slideRight()中1将被添加到current所以它将成为0，即数组的第一个元素

sliderImages[current + 1].style.display = "block"; 

另一答案

在上面的代码中

var current = 0;
if slider image length 0 > then it's sliding arrow works. !