Как заменить картинки через определенное время в JS (не меняя src изображения)?

Question

[Stud]

Есть исходная разметка. Знаю, что нужно использовать setTimeout или setInterval, но не могу понять как сделать так, чтобы одна картинка пряталась, а другая показывалась каждые 3 секунды. И цикл должен повторяться до момента нажатия на кнопку.

<div class="images-wrapper">
      <img src="./img/1.jpg" alt="image of game" class="image-to-show visible" />
      <img src="./img/2.jpg" alt="image of game" class="image-to-show" />
      <img src="./img/3.JPG" alt="image of game" class="image-to-show" />
      <img src="./img/4.png" alt="image of game" class="image-to-show" />
    </div>

Answer 1

[moreqa]

https://codepen.io/dsfsdfsdfsdfds/pen/RwLMgbL?edit...

Comments

[Stud]

Спасибо большое))))))) Работает)))

[Stud]

Помогите, пожалуйста, ещё с кнопками разобраться. Я добавила две кнопки:

<div class="btns">
    <button class="stop" >Stop</button>
    <button class="continue" >Continue</button>
    </div>

Для Stop установила остановку анимации, а как возобновить с помощью Continue?

document.querySelector('.stop').addEventListener('click', function() {
  clearInterval(timer)
 })
stop.disabled = true

[moreqa]

TatiNaumchuk, обновил песочницу

[Stud]

moreqa, огромное спасибо))))