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

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

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

https://codepen.io/Alexxxsander/pen/PoQYRXo
  • Вопрос задан
  • 72 просмотра
Комментировать
Подписаться 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 Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Senior Backend JavaScript Node.js Developer
Simplenight inc.
от 4 000 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн главной страницы
19 мая 2024, в 11:20
3000 руб./за проект
Написать модуль рассчета доставки Опенкарт
19 мая 2024, в 10:21
10000 руб./за проект
Сделать 3D модель по картинке (без текстур)
19 мая 2024, в 10:04
1500 руб./за проект
Ещё заказы