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

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

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

https://codepen.io/Alexxxsander/pen/PoQYRXo
  • Вопрос задан
  • 73 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 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 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать индикатор для торговой платформы Metatreder5
22 нояб. 2024, в 15:00
2500 руб./в час
Разработка базы данных на SQL
22 нояб. 2024, в 14:51
10000 руб./за проект
Разработка API на Go+ClickHouse
22 нояб. 2024, в 14:51
2000 руб./в час
Ещё заказы