Как сделать чтоб блоки сменяли бесконечно друг друга через 3с?

Ссылка скопирована
JavaScript
1 ответ

Подскажите пожалуйста, есть массив объектов, есть функция, создающая блок, нужно сделать бесконечную смену блоков через 3с., у меня они появляются все вместе.

const arrObj = [      {        img: 'img/avatar-1.png',        textUser: 'Здравствуйте!',        textAdmin: 'Привет!',      },      {        img: 'img/avatar-2.png',        textUser: 'Как дела?',        textAdmin: 'Норм',      },    ];        function getChat(arr) {      const block = document.createElement('div');          const user = document.createElement('div');      const userImg = document.createElement('img');      userImg.src = arr.img;      const userText = document.createElement('p');      userText.textContent = arr.textUser;          const admin = document.createElement('div');      const adminImg = document.createElement('img');      adminImg.src = 'img/logo.svg';      const adminText = document.createElement('p');      adminText.textContent = arr.textAdmin;          admin.append(adminImg, adminText);      user.append(userImg, userText);      block.append(user, admin);    }        setInterval(() => {      for (let i = 0; i < arrObj.length; i++) {        getBlock(arrObj[i]);      }    }, 3000)

const arrObj = [ { img: 'img/avatar-1.png', textUser: 'Здравствуйте!', textAdmin: 'Привет!', }, { img: 'img/avatar-2.png', textUser: 'Как дела?', textAdmin: 'Норм', }, ]; function getChat(arr) { const block = document.createElement('div'); const user = document.createElement('div'); const userImg = document.createElement('img'); userImg.src = arr.img; const userText = document.createElement('p'); userText.textContent = arr.textUser; const admin = document.createElement('div'); const adminImg = document.createElement('img'); adminImg.src = 'img/logo.svg'; const adminText = document.createElement('p'); adminText.textContent = arr.textAdmin; admin.append(adminImg, adminText); user.append(userImg, userText); block.append(user, admin); } setInterval(() => { for (let i = 0; i < arrObj.length; i++) { getBlock(arrObj[i]); } }, 3000)

Дополнительно:

Ответы:

Давайте своим блокам уникальные id и проверяйте какой сейчас существует. Если существует #user, то заменяем его на #admin и наоборот. Ну и с контейнером для блоков та же история. Если он существует, то очищаем его перед добавлением блока.

  • В функции при смене блока меняется объекты в массиве
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Сергей Миронов Ответ

Для того чтобы сделать блоки сменялись бесконечно друг друга через каждые 3 секунды, вам следует использовать JavaScript в сочетании с CSS.

Сначала создайте структуру HTML, в которой будут размещены ваши блоки:

<div id="slider">
  <div class="slide">Содержимое блока 1</div>
  <div class="slide">Содержимое блока 2</div>
  <div class="slide">Содержимое блока 3</div>
</div>

<div id="slider"> <div class="slide">Содержимое блока 1</div> <div class="slide">Содержимое блока 2</div> <div class="slide">Содержимое блока 3</div> </div>

Далее добавьте стили CSS для блоков и анимации:

#slider {
  display: flex;
  overflow: hidden;
}
 
.slide {
  width: 100%;
  flex-shrink: 0;
  display: none;
}
 
.active {
  display: block;
  animation: slide 3s infinite;
}
 
@keyframes slide {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

#slider { display: flex; overflow: hidden; } .slide { width: 100%; flex-shrink: 0; display: none; } .active { display: block; animation: slide 3s infinite; } @keyframes slide { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

Теперь добавьте JavaScript код, который будет управлять сменой блоков:

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
 
function showSlide() {
  slides.forEach((slide) =&gt; {
    slide.classList.remove('active');
  });
  slides[currentSlide].classList.add('active');
  currentSlide = (currentSlide + 1) % slides.length;
}
 
showSlide();
setInterval(showSlide, 3000);

const slides = document.querySelectorAll('.slide'); let currentSlide = 0; function showSlide() { slides.forEach((slide) =&gt; { slide.classList.remove('active'); }); slides[currentSlide].classList.add('active'); currentSlide = (currentSlide + 1) % slides.length; } showSlide(); setInterval(showSlide, 3000);

Теперь ваш блоки будут сменяться друг друга через каждые 3 секунды. Помните, что вы можете настроить стили и анимации под ваш дизайн и потребности.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов