2

const pictureChange = document.querySelectorAll('.image-to-show')

function pictureReplacement(array, duration, indexElement) {
  let timer = setInterval(() => {
    const item = array[indexElement]
    console.log(item)
    indexElement++
    if (indexElement >= array.length) {
      clearInterval(timer)
    }
  }, duration);
  // setInterval(() => {

  // }, interval);
}

pictureReplacement(pictureChange, 500, 0)
<div class="images-wrapper">
  <img src="./banners/img/1.jpg" alt="image of game" class="image-to-show" />
  <img src="./banners/img/2.jpg" alt="image of game" class="image-to-show" />
  <img src="./banners/img/3.JPG" alt="image of game" class="image-to-show" />
  <img src="./banners/img/4.png" alt="image of game" class="image-to-show" />
</div>

1 ответ 1

0

const pictureChange = document.querySelectorAll('.image-to-show')

function pictureReplacement(array, duration, indexElement) {
  array.forEach(el => el.style.display = 'none');
  let timer = setInterval(() => {
    array.forEach(el => el.style.display = 'none');
    const item = array[indexElement];
    item.style.display = '';
    console.log(item);
    indexElement++;
    if (indexElement >= array.length) {
      clearInterval(timer);
    }
  }, duration);
}

pictureReplacement(pictureChange, 500, 0);
<div class="images-wrapper">
  <img src="./banners/img/1.jpg" alt="image of game 1" class="image-to-show" />
  <img src="./banners/img/2.jpg" alt="image of game 2" class="image-to-show" />
  <img src="./banners/img/3.JPG" alt="image of game 3" class="image-to-show" />
  <img src="./banners/img/4.png" alt="image of game 4" class="image-to-show" />
</div>

3
  • 1
    Спасибо за помощь, сейчас попробую
    – Galina
    3 янв 2022 в 14:49
  • Помогите, пожалуйста, ещё добавить две кнопки: По нажатию на кнопку цикл завершается, на картинке, которая была при нажатии кнопки. И кнопку Возобновить, при нажатии которой цикл продолжается с той картинки, которая показана на экране.
    – Galina
    3 янв 2022 в 15:59
  • @Galina Оно так не работает. Задайте новый вопрос. Знак "галочка" - слева от ответа.
    – user176262
    3 янв 2022 в 16:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.