JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<img id="image" src="https://www.w3schools.com/css/img_fjords.jpg" style="width:300px">
 <button id="start">
   Start
 </button>

 <button id="stop">
   Stop
 </button>

JavaScript

var imageSources = ["https://www.w3schools.com/css/img_fjords.jpg", "https://www.w3schools.com/howto/img_mountains.jpg"]


let idInterval;
document.getElementById('start').addEventListener('click', () => {
  let index = 0
  clearInterval(idInterval);
  idInterval = setInterval(() => {
    if (index === imageSources.length) {
      index = 0;
      clearInterval(idInterval);
    }
    document.getElementById("image").src = imageSources[index];
    index++;
  }, 2000);

})