Задать вопрос
Alexander3928
@Alexander3928
javascript

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

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

https://codepen.io/Alexxxsander/pen/PoQYRXo
  • Вопрос задан
  • 75 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Решения вопроса 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})`;
});
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
Jaffyel
@Jaffyel
Frontend developer 
<!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++;
  }
})
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Разработчик (Next.js / JavaScript / TypeScript)
App Company
от 200 000 до 300 000 ₽
Web-разработчик/WordPress программист (Full-stack)
JustBusiness • Санкт-Петербург
от 130 000 до 150 000 ₽
Верстальщик / фронтендер для браузерного расширения
DevTeam.Space
от 1 000 до 2 000 $
Ещё вакансии