如果声明让我困惑

Posted 2021-04-12

我在这里有一个滑块的代码，我不明白if语句是做什么的。

在我脑海里有两个选择

首先，如果current === sliderImages.length - 1然后current === 1，第二，如果current === sliderImages.length - 1然后current === 2（阵列的长度）然后带走一个。

这是我的（javascript）代码：

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

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

答案

我认为您的问题来自于考虑阵列上的特定数字。想象一下，你有一个n数字的数组。

if (current === sliderImages.length - 1) {
  current = -1;
}

sliderImages.length将是n（例如10，或20，任何数字）。

您的current变量会告诉您当前显示的是哪个图像。因此，如果单击右箭头，则需要向右移动一步。但是如果你在阵列的最后一个位置，那么下一个图像就是第一个图像。所以你做current = -1

换句话说：如果检查您是否在最后一个图像中，则返回到阵列上的第一个位置。