Что значат выражения "i %= imgs.length"; "img.src = imgs[i]"

Question

Пишу код на js первый раз, поэтому не понимаю смысл выражений последних двух строк в функции смены картинки

var i=0;
var image = document.getElementById("img");
var imgs = ['1.jpg','2.jpg'];
function changeImg() {
    i++; 
    i %= imgs.length;
    img.src = imgs[i];
}

Answer 1

Есть вариант сделать не так лаконично, но зато более понятно для новичков.

function changeImg() {
    const image = document.getElementById('img');
    const imgArray = ['https://pixelbox.ru/wp-content/uploads/2020/12/ava-twitch-32.jpg','https://cs9.pikabu.ru/avatars/2293/x2293505-666315228.png'];
    // Находим в массиве картинку, которая отображается сейчас
    const currentIndex = imgArray.indexOf(image.src);
    // Проверяем, если это последняя картинка в массиве, то снова покажем первую (прибавляем 1, т.к. в массиве индексы начинаются с нуля, а длина массива считается с 1)
    const nextIndex = currentIndex + 1 >= imgArray.length ? 0 : currentIndex + 1;
    image.src = imgArray[nextIndex];
}

<html>
  <body>
    <img id="img" src="https://pixelbox.ru/wp-content/uploads/2020/12/ava-twitch-32.jpg" width="50px" />
    <button onclick="changeImg()">Сменить картинку</button>
  </body>
</html>

БЛОГ НА HUSL

Что значат выражения "i %= imgs.length"; "img.src = imgs[i]"

Ответы (1 шт):