Alexander3928
@Alexander3928

Как по цепочки менять url картинки из массива?

Как начиная с 0 позиции из массива, менять url картинки? Изначально картинка из массива на позиции 0, когда клик нужно заменить текущий url на следующий. То-есть 1 позиция > 2 позиция и так до конца массива. Как это можно сделать?

https://codepen.io/Alexxxsander/pen/PoQYRXo
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Счетчик, каждый раз увеличивать на 1, брать остаток от деления на длину массива:
let bgIndex = 0;
appBackground.backgroundParrent.addEventListener('click', () => {
  const url = backgroundArrayImg[(++bgIndex) % backgroundArrayImg.length];
  document.querySelector('body').style.backgroundImage = `url(${url})`;
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="background-wrapper">
    <img class="background" src="https://picsum.photos/300/100?1"/>
  </div>
</body>
</html>


let getImg = document.querySelector('.background');

let backgroundArrayImg = [
   'https://picsum.photos/300/100?1', 'https://picsum.photos/300/100?2', 'https://picsum.photos/300/100?3'
];

let count = 1;

getImg.addEventListener('click', () => {
  if(count === backgroundArrayImg.length){
    count = 0;
  }
  else{
    getImg.src = backgroundArrayImg[count];
    count++;
  }
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы