Что делают эти строки в коде?

Question

[petrro]

Есть код слайдера изображений:

let slideIndex = 0;

function plusSlides(n) {
  slideIndex = (slideIndex + slides.length + n) % slides.length;        //строка №1 
  showSlides();
}

function currentSlide(n) {
  slideIndex = n % slides.length;    //строка №2
  showSlides();
}

const slides = [...document.getElementsByClassName("image")];

function showSlides() {
  slides.forEach((slide,i) => slide.style.display = i === slideIndex ? "block" : "none");
 
}

setInterval(() => plusSlides(1), 3000);

Не могу понять закоментирование строки.
Я понимаю что %- это оператор остаток от деления, slides -переменная, и т.д. Но я не могу в целом обьяснить что код в этих строках делает. Зачем там остаток от деления? Зачем в скобках все подряд добавляется друг к другу. Какая то криптография получается а не код. Подскажите пожалуйста.

Answer 1

[0xD34F]

Допустим, есть всего 10 слайдов.

• Производится попытка установить в качестве текущего слайд номер 14. Что делать? Очевидно, установить в качестве текущего четвёртый - остаток от деления изначально указанного номера на количество слайдов.
  
• Как установить минус второй (-2) слайд? - очевидно, это второй с конца, надо добавить количество слайдов, чтобы получить реальный номер.
  
• Зачем одновременно добавляется количество слайдов и берётся остаток? - чтобы один и тот же код корректно обрабатывал переходы из конца в начало и из начала в конец.
  

Comments

[petrro]

спасибо, но я не понимаю( уже давно мне известно решение слайдера с помощью цикла for:

var index = 1;
show (index);

function plus (arg) {
  show (index = index + arg);
}

function show (arg) {
var images = document.querySelectorAll(".image");
      if (arg > images.length){
           index = 1;
     }    
     if (arg < 1) { 
         index = images.length;
     }
     for (i = 0; i < images.length; i++) {
          images[i].style.display = "none";  
     }
    images[index-1].style.display = "block"; 
}
var timer=setInterval(function() {plus(1)}, 5000);

Код очень простой и понятен, но так как изучаю методы массива а именно forEach, ищу решение с forEach.
Возможно в этом коде можно как-то просто переделать цикл for и ничего больше не трогать? Чтобы не было никаких остатков от делений... Как вы считаете? Если да то как?

[0xD34F]

petrro,

переделать

Ваш вопрос был не об этом.

[Роман]

petrro, предложенное в вопросе решение не идеально, но однозначно лучше чем то что примененно в варианте с for.

Для того чтобы понять строчки просто запустите этот код и посмотрите вывод в консоли:

const slideAmount = 5; // количество слайдов
for(let n=-10; n<10; n++ ){
   const slideIndex = ((n%slideAmount)+slideAmount)%slideAmount;
   console.log("n:", n, " ---> ",  "slideIndex:", slideIndex);
}

в консоли будет

n: -10  --->  slideIndex: 0
n: -9  --->  slideIndex: 1
n: -8  --->  slideIndex: 2
n: -7  --->  slideIndex: 3
n: -6  --->  slideIndex: 4
n: -5  --->  slideIndex: 0
n: -4  --->  slideIndex: 1
n: -3  --->  slideIndex: 2
n: -2  --->  slideIndex: 3
n: -1  --->  slideIndex: 4
n: 0  --->  slideIndex: 0
n: 1  --->  slideIndex: 1
n: 2  --->  slideIndex: 2
n: 3  --->  slideIndex: 3
n: 4  --->  slideIndex: 4
n: 5  --->  slideIndex: 0
n: 6  --->  slideIndex: 1
n: 7  --->  slideIndex: 2
n: 8  --->  slideIndex: 3
n: 9  --->  slideIndex: 4

Answer 2

[Роман]

Эту строчку можно упростить
Заменив

slideIndex = (slideIndex + slides.length + n) % slides.length;

На
slideIndex = (slideIndex + n) % slides.length;

Про упрощение обманул, как заметил 0xD34F в своем ответе добавление slides.length нужно для приведения номера слайда к легитимному диапазону в случае если он отрицательный.

Сама строка просто перелистывает на n слайдов вперед. Делается это так:
К номеру текущего слайда добавляется число слайдов на которые надо перескочить вперед а затем, на случай если полученный новый номер текущего слайда больше числа слайдов находим остаток от деления полученного номера на общее число слайдов

В этой строчке

slideIndex = n % slides.length;
Просто выставляется новый номер текущего слайда а на случай если он больше числа слайдов находим остаток от его деления на общее число слайдов

Comments

[0xD34F]

можно упростить

нельзя

текущий 0, отматываем назад (-1) - получим отрицательное значение, не бывает таких индексов

[Роман]

0xD34F, да про отрицательные номера както не подумал, добавил жирный комментарий в тело ответа.

[Роман]

0xD34F, но тут же возникает вопрос. Что будет если слайдов 10 а мы пытаемся поставить например -24

[Роман]

0xD34F, напрашивается решение типа такого:

while( slideIndex < 0 ){ slideIndex += slides.length }

[0xD34F]

Роман, очевидно же - два раза брать остаток. Первый - чтобы избавиться от излишней, м-м-м, отрицательности значения, затем добавляем length и второй раз берём остаток.

[Роман]

0xD34F, ну да, это действительно лучше чем while

[Роман]

0xD34F, я правильно понимаю что это надо делать как то так?

slideIndex = (slides.length + (slideIndex + n) % slides.length) % slides.length;

[0xD34F]

Роман, похоже на правду.