需要帮助了解 javascript 画廊代码

Question

您好，我为我的 html 创建了一个幻灯片，它具有一次显示一个图片库的功能，以及通过单击箭头移动到下一张图片来展示下一张图片的功能，我仍然不清楚这行代码以及它与幻灯片功能的关系。我参考了这个网站来完成幻灯片放映：https://www.w3schools.com/howto/howto_js_slideshow.asp 请问有人能解释一下这行代码的作用吗？非常感谢！

var slideIndex = 1;
showSlides(slideIndex);

//calling of functions to let the slide move to the next picture
function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if ( n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display= "block";
    dots[slideIndex-1].className += " active";
}

Answer 1

// set the index of the picture in the slideshow to 1
var slideIndex = 1;

// Calls the main function 'showSlides', and passes in the 1 
// from above
showSlides(slideIndex);

//calling of functions to let the slide move to the next picture
// This function probably gets called when user clicks the next
// button. It adds n to the index, and calls the main function 'showSlides' again.
function plusSlides(n) {
    showSlides(slideIndex += n);
}


function currentSlide(n) {
    showSlides(slideIndex = n);
}

// Main function, takes a number argument for the slide number
// to show, and assigns this number to the variable 'n'
function showSlides(n) {
//  This variable is for iterating (adding)
    var i;

// This variable selects the mySlides element from the DOM HTML
    var slides = document.getElementsByClassName("mySlides");

// This variable selects the dot element from the DOM HTML
    var dots = document.getElementsByClassName("dot");

// If the number passed into the main function is greater_than 
// the number of slides, then set the variable slideIndex to 1.
    if ( n > slides.length) {slideIndex = 1}

// If the number passed into the main function is less_than 
// the number of slides, then set the variable slideIndex to the number of slides.
    if (n < 1) {slideIndex = slides.length}

// Iterate through all of the slides, and do what's in the {} 
// to each slide. Set the display style to none to hide them.
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

// Iterate through all of the dots, and do what's in the {} 
// to each dot element. Remove the class name 'active' for CSS.
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }

// Set the display style of the slide before (-1) to 'block'
// This makes it visible
    slides[slideIndex-1].style.display= "block";

// Set the class name of the dot before (-1) to 'active'
// This is probably styled in the CSS
    dots[slideIndex-1].className += " active";
}

Answer 2

下面是这段代码的作用的细分：

var slideIndex = 1;

初始化变量slideIndex为1

showSlides(slideIndex);

显示第一张幻灯片（请参阅下面的评论了解为什么 1 是第一张幻灯片而不是 0）

function plusSlides(n) {
    showSlides(slideIndex += n);
}

此功能将向前跳过 n 张幻灯片并显示该幻灯片。请注意，您发布的代码中从未真正调用过此函数。

function currentSlide(n) {
    showSlides(slideIndex = n);
}

这会将 slideIndex 设置为 n，然后显示第 n 张幻灯片。请注意，您发布的代码中也从未真正调用过此函数。

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");

在showSlides函数中，我们声明了一个空变量i。

然后我们在 DOM（HTML）中查找元素，一些 class 为 mySlides，一些 class 为dot。请注意，这些函数可以 return 多个元素（或 none）。

    if ( n > slides.length) {slideIndex = 1}

如果我们到达列表的末尾（经过最后一张幻灯片），我们将 slideIndex 设置回 1。

    if (n < 1) {slideIndex = slides.length}

如果我们已经回到第一张幻灯片，请回到最后

    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

将所有幻灯片的 display 样式设置为 none。这将从 dom 中删除所有幻灯片（有效地隐藏它们）

    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }

在没有看到 html 的情况下，我不确定在此上下文中的“点”是什么，它可能是您所在幻灯片的指示器。

此代码从所有 class 中带有“点”的元素中删除“活动”class。请注意，这不是删除 class 的好方法 - （如果有另一个 class 称为 'activePanel' 或其他东西怎么办？）

    slides[slideIndex-1].style.display= "block";

这会将索引 slideIndex - 1 的幻灯片的 display 样式设置为 block，有效地使其可见（之前设置为 'none' 以隐藏它）

是slideIndex - 1，因为上面的逻辑出于某种原因从1开始索引，而数组是zero-indexed。真的没有理由这样做。

    dots[slideIndex-1].className += " active";

这会将 active class 添加到索引 slideIndex-1 的 dot。

一些额外的评论：

一个class是一个cssclass。它基本上为元素添加了样式。

Answer 3

slideIndex 保存幻灯片放映的初始索引，即可见图像。

showslides(n) 是一个函数，它接受一个参数并且参数必须是一个数字，它是图片显示。此函数的工作原理是循环遍历给定的图库并显示带有传递给该函数的索引的图像，并隐藏其他图像。

currentSlide(n) 与 showSlides(n) 函数一起工作，这样传递给 [=30= 的任何值]currentSlide(n) 将是当前要显示的图像。通过这种方式，您可以单击缩略图，例如特定图像将可见，而其他图像将被隐藏，因为图像索引作为参数传递给 currentSlide(n)

plusSlides(n) 这只会将 n 的值添加到 slideIndex 大多数情况下它只是 1 所以如果 slideIndex 是 3 调用 plusSlides(n) 将查找第四个索引。 - 同样意味着 minusSlides(n) 它们可以称为 next 和 prev

的别名

需要帮助了解 javascript 画廊代码

need help Understanding javascript gallery code

javascript

slideshow