你能逐行解释这个简单的图像滑块代码吗？

Question

你能逐行解释这个简单的图像滑块代码吗？

我对 currentSlide(no) + plusSlides(n) 中 n 和 no 值的来源特别感兴趣。

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var interval;
var pauseButton = document.getElementById("pause");

showSlides();
playSlideshow();

function showSlides() {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].style.display = "block";
}
// Manual control 
function currentSlide(no) {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex = no;
  slides[no - 1].style.display = "block";
}

function plusSlides(n) {
  var newslideIndex = slideIndex + n;
  if (newslideIndex < 6 && newslideIndex > 0) {
    currentSlide(newslideIndex);
  }
}

编辑以添加其余代码。

// Pause

var playing = true;

function pauseSlideshow() {
  var pauseButton = document.getElementById("pause");
  pauseButton.innerHTML = "&#9656;";
  playing = false;
  clearInterval(interval);
}

function playSlideshow() {
  pauseButton.innerHTML = "&#x23F8;";
  playing = true;
  interval = setInterval(showSlides, 5000);
}

pauseButton.onclick = function () {
  if (playing) {
    pauseSlideshow();
  } else {
    playSlideshow();
  }
};

根据评论，我添加了额外的代码。

Answer 1

是的，可以！

第一个函数showSlides被调用。它首先使带有 mySlides class 的每个元素不可见（基本上隐藏了所有幻灯片）。然后它增加幻灯片索引并检查索引是否超过幻灯片总数，以便它可以再次从头开始。最后它显示索引所指的幻灯片。

currentSlide 函数将活动幻灯片设置为 no 参数中提供的索引。首先，它隐藏所有幻灯片，然后将新幻灯片索引设置为 no，然后显示该幻灯片。

最后 plusSlides 向前（如果使用负数则向后）n 幻灯片。 if 语句检查索引是否在 1 和 5 之间。如果是与新索引对应的幻灯片。

几点注意事项

for loops 可以这样写，前面没有变量声明

for(let x = 0; x < 100; x++){
    console.log(x);
}

在您的 plusSides 函数中，您检查了一个特定的范围，但是您可以像 showSlides 中那样使用 slides.length 以幻灯片的数量为基础。此外，我建议确保如果索引确实超出此范围，则将索引设置为默认值。

if (newslideIndex < slides.length && newslideIndex > 0) {
    currentSlide(newslideIndex);
} else {
    currentSlide(1);
}

就这些了！

你能逐行解释这个简单的图像滑块代码吗？

Could you explain this simple image slider code line by line?

javascript

carousel

是的，可以！

几点注意事项