Question

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

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变量中的任何元素都会被赋予.slide和.showing类

我是否遵循此权利？

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

我认为我比这更清楚地理解这一点，所以任何解释都会有很大的帮助。

谢谢。

Answer 1

实际上，函数nextSlide()不会循环遍历图像本身，它只是将currentSlide的类设置为'slide'，将下一张幻灯片（currentSlide + 1）设置为'slide showing'。 setInterval(nextSlide, 2000)是使函数遍历所有图像的原因，此间隔在每2秒后调用nextSlide函数。

首先：

currentSlide等于0。 slideInterval在2秒后调用nextSlide（）。它将幻灯片0的className设置为“slide”，并将currentSlide增加到1。然后，它将幻灯片1的className设置为“slide showing”。现在，slideInterval在2秒后调用nextSlide（），但现在它以currentSlide等于1开始。

Answer 2

代码的第一行将所有带有.slide类的元素放在javascript数组中。现在我们确实需要找到一些循环遍历所有幻灯片的方法。

行setInterval(nextSlide, 2000);确保在2000微秒后调用nextSlide函数。通常在setInterval(nextSlide, 2000);函数中应该有另一个nextSlide调用，以确保在2秒内再次调用nextSlide函数。这样我们就创造了一种循环。也许原始脚本中的setInterval(nextSlide, 2000);函数内有nextSlide个调用。这绝对是必不可少的。否则我们就不会有循环。

nextSlide功能会隐藏当前幻灯片并显示下一张幻灯片。在函数内部，计数器currentSlide递增。这就是导致循环的原因。

nextSlide功能中有什么内容？

slides[currentSlide].className = 'slide'; 
// remove the showing class so the slide with the index 'currentSlide' no longer shows

currentSlide = (currentSlide+1);
// increment the counter so it points to the next slide

slides[currentSlide].className = 'slide showing'; 
// add the showing class to this slide, so this slide is now showing.

现在我们要添加一件事。当我们用完幻灯片时，我们必须确保我们的计数器返回到第一张幻灯片。我们使用％modulo运算符。当我们希望数字在达到某个值时“环绕”时使用Modular arithmetic。（维基百科文章有一个很好的时钟示例）。

我们想在currentSlide计数器中添加1，我们希望它包围幻灯片的总数（=幻灯片数组的长度）：

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

Answer 3

诀窍是这一行：

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

以上代码每2秒执行，使用setInterval(nextSlide, 2000)

希望有道理！：）

Answer 4

setInterval()方法调用函数或以指定的时间间隔（以毫秒为单位）计算表达式。

setInterval（）方法将继续调用该函数，直到调用clearInterval（）或窗口关闭。

所以nextSlide{}每隔两秒就会调用一次。

nextSlide()必须包含增加滑块的逻辑

Answer 5

你关注得很好，但是你跳过了重要的一句话：setInterval(nextSlide, 2000)。这一行的作用是每2000毫秒（2秒）执行一次nextSlide函数。

nextSlide函数在定义时不运行，但由setInterval执行时不运行。您的分析适用于函数在第一次传递时执行的操作（当currentSlide设置为0时）。之后，currentSlide将为1,2，......函数的三行执行以下操作：

将当前幻灯片的类设置为slide。
增加currentSlide变量（余下的内容是为了在它超过可用幻灯片结束时循环回0）
将新电流幻灯片的课程设置为slide showing。

这将每2秒发生一次。

打破JavaScript横幅滑块

5 个答案: