javascript - 分解JavaScript标语滑块

我最近问了一个有关此“简单”滑块的问题，我想更深入地研究。这是脚本：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide(){
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

所以我得到的是：


currentSlide被赋予一个0值，当具有该值时被赋予slide类
该值更改为1
找到该新值的其余部分以及.slides容器内的元素总数，并将其分配给currentSlide变量
然后，在幻灯片变量内部使用该currentSlide变量的任何元素都被赋予.slide和.showing类


我遵循这个权利吗？

如果我是，我很确定我不是，那么该函数如何在没有循环功能的情况下循环遍历不同的幻灯片？

我以为我比清楚地了解更多，所以任何解释都会有很大帮助。

谢谢。

最佳答案

诀窍在于此行：

currentSlide = (currentSlide+1) % slides.length;

因此，如果我们假设slides.length等于3，那么(currentSlide+1) % slides.length在第三次计算为0并重置，就像这样...

1 % slides.length // 1
2 % slides.length // 2
3 % slides.length // 0

所以它的内容更像是这样：

// Get the currentSlide and set the className to 'slide'
slides[currentSlide].className = 'slide';

// Set currentSlide to the next slide, i.e. 1, 2, or 0
currentSlide = (currentSlide+1)%slides.length;

/*
   currentSlide is technically the next slide at this point, so
   it's actually getting the next slide and setting the className
   to 'slide showing'. The next slide will be slide 0
   on the third time round.
*/
slides[currentSlide].className = 'slide showing';

上面的代码使用setInterval(nextSlide, 2000)每2秒执行一次

希望有道理！ :)