代码之家 › 专栏 › 技术社区 › phurst-so

分解JavaScript横幅滑块

banner function javascript

phurst-so · 技术社区 · 9 年前

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 课程

我认为我比我清楚地了解这一点,所以任何解释都会大有帮助。

非常感谢。

5 回复 | 直到 9 年前

Daniel Yefet 9 年前

诀窍在于这一行:

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)

Dij 9 年前

nextSlide() setInterval(nextSlide, 2000)

因此,首先:

slideInterval在2秒后调用nextSlide()。它将幻灯片0的类名设置为“slide”,并将currentSlide增加到1。现在,slideInterval在2秒后调用nextSlide(),但现在它以等于1的currentSlide开始。

jpuntd 9 年前

代码的第一行将所有元素与 .slide 在javascript数组内初始化。现在,我们确实需要找到一些方法来循环浏览所有幻灯片。

setInterval(nextSlide, 2000); nextSlide 函数在2000微秒后被调用。通常情况下,应该有另一个 setInterval(nextSlide,2000); nextSlide公司 函数,确保在2秒内再次调用nextSlide函数。这样我们就创建了一种循环。也许有一个呼叫内部 nextSlide公司

这个 nextSlide公司 currentSlide

里面是什么作用

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.

Modular arithmetic 当我们希望数字在达到某个值时“环绕”时使用。(维基百科的文章有一个很好的时钟示例)。

我们希望向currentSlide计数器添加1,并希望它围绕幻灯片总数(=幻灯片阵列的长度):

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

Francesco Taioli 9 年前

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

setInterval()方法将继续调用该函数,直到调用clearInterval()或关闭窗口。

所以 nextSlide{}

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

arbuthnott 9 年前

setInterval(nextSlide, 2000) nextSlide 每2000毫秒(2秒)运行一次。

nextSlide公司 函数在定义时不运行,但在由执行时运行 setInterval currentSlide 电流滑动

将当前幻灯片的类别设置为 slide .
增加 0 当它超过可用幻灯片的末尾时)
将新的curret幻灯片的类设置为 slide showing

这将每2秒发生一次。