Точно описать строчки кода. JS - слайдер

239

19 мая 2017, 16:13

Мне посоветовали взять этот кусок кода. Я взяв, но толком мне не понятны некоторые моменты.

var slides = document.querySelectorAll("#slides .slide"); // что здесь выбирается? 
var currentSlide = 0;                             // текущий слайд, тоесть начинают с нуля
var slideInterval = setInterval(nextSlide, 8000); // вызов слайдера с задержкой 8 секунд 
function nextSlide() {
    slides[currentSlide].className = "slide";          // элемент массива с слайдерами, текущий слайд
    currentSlide = (currentSlide + 1) % slides.length; // я так понял, это для возвращения к 0?
    slides[currentSlide].className = "slide showing"   // показать элемент слайдера
}

Я все правильно прокомментировал?

Подскажите, пожалуйста, то, что я не понял (обозначил "?").

Answer 1

var slides = document.querySelectorAll("#slides .slide"); // тут выбираются элементы с классом .slide внутри контейнера с id="slides"
var currentSlide = 0;                             // текущий слайд, тоесть начинают с нуля
var slideInterval = setInterval(nextSlide, 8000); // вызов слайдера с задержкой 8 секунд 
function nextSlide() {
    slides[currentSlide].className = "slide";          // элемент массива с слайдерами, текущий слайд
    currentSlide = (currentSlide + 1) % slides.length; // это деление с остатком, см ниже
    slides[currentSlide].className = "slide showing"   // показать элемент слайдера
}

деление с остатком имеет такой плюс - остаток идет по циклу от 0 до (n-1), т.е.

const всегоЭлементов=14; 
for (let простоНомер=всегоЭлементов;простоНомер<100;простоНомер++) { 
           console.log(простоНомер, простоНомер % всегоЭлементов); 
}

ps: в реальном коде не используйте кириллицу для переменных, я их так назвал для демонстрации.