Блог

1. Привет, я создал слайд-шоу для своего html с функцией показа галереи изображений по одному за раз с функцией демонстрации следующего изображения, нажав стрелку, чтобы перейти к следующему изображению, мне все еще неясна эта строка кода и как она связана с функцией слайд-шоу. Я обратился к этому веб-сайту, чтобы завершить слайд-шоу: https://www.w3schools.com/howto/howto_js_slideshow.asp Могу я спросить, может ли кто-нибудь объяснить, что делает эта строка кода? Огромное спасибо!

 var slideIndex = 1;
showSlides(slideIndex);

//callin& 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.&etElementsByClassName("mySlides");
    var dots = document.&etElementsByClassName("dot");
    if ( n &&t; slides.len&th) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.len&th}
    for (i = 0; i < slides.len&th; i  ) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.len&th; i  ) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display= "block";
    dots[slideIndex-1].className  = " active";
}
  

 // 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);

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


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

// Main function, takes a number ar&ument for the slide number
// to show, and assi&ns this number to the variable 'n'
function showSlides(n) {
//  This variable is for iteratin& (addin&)
    var i;

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

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

// If the number passed into the main function is &reater_than 
// the number of slides, then set the variable slideIndex to 1.
    if ( n &&t; slides.len&th) {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.len&th}

// Iterate throu&h 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.len&th; i  ) {
        slides[i].style.display = "none";
    }

// Iterate throu&h 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.len&th; 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";
}
  

Вот краткое описание того, что делает этот код:

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.&etElementsByClassName("mySlides");
    var dots = document.&etElementsByClassName("dot");
  

Внутри showSlides функции мы объявляем пустую переменную i .

Затем мы ищем в DOM (HTML) элементы, некоторые с class of mySlides , а некоторые с классом dot . Обратите внимание, что эти функции могут возвращать несколько элементов (или ни одного).

     if ( n &&t; slides.len&th) {slideIndex = 1}
  

Если мы дошли до конца списка (прошли мимо последнего слайда), мы возвращаем slideIndex обратно в 1.

     if (n < 1) {slideIndex = slides.len&th}
  

Если мы вернулись к первому слайду, вернитесь к концу

     for (i = 0; i < slides.len&th; i  ) {
        slides[i].style.display = "none";
    }
  

Задает display стиль всех слайдов на none . Это удаляет все слайды из dom (эффективно скрывает их)

     for (i = 0; i < dots.len&th; i  ) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
  

Я не совсем уверен, что такое «точка» в этом контексте, не видя html, это может быть показателем того, на каком слайде вы находитесь.

Этот код удаляет класс «active» из всех элементов с «точкой» в их классе. Обратите внимание, что это не лучший способ удалить класс — (что, если есть другой класс с именем ‘activePanel’ или что-то в этом роде?)

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

Это устанавливает display стиль слайда index slideIndex - 1 на block , эффективно делая его видимым (ранее для него было установлено значение ‘none’, которое скрывает его)

Это slideIndex - 1 потому, что по какой-то причине приведенная выше логика запускает индекс с 1, тогда как массив индексируется с нулевым индексом. На самом деле нет причин делать это.

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

Это добавляет active класс к dot индексу slideIndex-1 .

Несколько дополнительных комментариев:

A class — это класс css. По сути, это добавляет стиль элементу.

slideIndex содержит начальный индекс вашего слайд-шоу, то есть видимое изображение.

showslides(n) это функция, которая принимает параметр, и параметром должно быть число, являющееся индексом картинки для показа. Принцип работы этой функции заключается в том, что она перебирает заданную галерею и показывает изображение с индексом, переданным функции, и скрывает другие изображения.

currentSlide(n) работает с showSlides(n) функцией, таким образом, любое значение, переданное в currentSlide(n) , будет текущим отображаемым изображением. Таким образом, при нажатии на миниатюру, например, это конкретное изображение будет видно, в то время как другие скрыты, потому что индекс изображения был передан в качестве аргумента currentSlide(n)

plusSlides(n) это просто добавит значение n к slideIndex , в большинстве случаев это было бы просто, 1 поэтому, если slideIndex было 3, plusSlides(n) вызывающий minusSlides(n) будет искать четвертый индекс. — то же самое подразумевает, что они могут быть вызваны псевдонимами для next и prev, ,,