JSFiddle - React, Tailwind, and code Playground

by bobbyfrancisjoseph

HTML

<div>
    <img id="my_image" src="" />
</div>

JavaScript

var imagesArray = ['http://goo.gl/gqPX3','http://goo.gl/Pz6zs','http://goo.gl/iGur7','http://goo.gl/3AG6r']

function RecurringTimer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    var resume = function() {
        start = new Date();
        timerId = window.setTimeout(function() {
            remaining = delay;
            resume();
            callback();
        }, remaining);
    };
    
    this.resume = resume;

    this.resume();
}

var timer = new RecurringTimer(function() {
  $("#my_image").attr("src",imagesArray[count]);
    count++;
    if(count>2)
    {
        count=0;       
    }
    console.log(count);
}, 4000);

var count = 0;

$(document).ready(function() {
   count = 0;
});