JSFiddle - React, Tailwind, and code Playground

by qustosh

JavaScript

//links to images/frames
var imagesLinks = ["http://michalikgregory.com/imgdif/f1.jpg",
              "http://michalikgregory.com/imgdif/f2.jpg",
              "http://michalikgregory.com/imgdif/f3.jpg",
              "http://michalikgregory.com/imgdif/f4.jpg",
              "http://michalikgregory.com/imgdif/f5.jpg"
];

//create div that will hold the images
var images = jQuery("<div></div>").attr("class", "images");

//preload images and append them to the div
jQuery.each(imagesLinks, function(i,el){
    $('<img class="anime" />').attr('src', el).appendTo(images); 
});

//make all images exculding the first invisible (using dispaly:none)
jQuery("img",images).each(function(i,el){
    if(i!=0){
        jQuery(el).css("display","none");
    }
});
//append the div with images to the body of the page
jQuery("body").append(images);

//get all images
var anime = jQuery(".anime");

//current visible image
var current = 0; 
//current loop 
var howManyLoops = 0
//callback function
function callback(){
    jQuery(".anime").hide();
    jQuery("body").html("3 full loops have passed, and now it's time for a callback").css("margin","50px 0 0 50px");
}

//loops the images
setTimeout(function(){
    if(current == (anime.length -1)){
        jQuery(anime[anime.length -1]).hide();
        jQuery(anime[0]).show();
        current = 0;
    }else{
        jQuery(anime[current]).hide();
        jQuery(anime[current+1]).show();        
        current +=1;
    }
    
    howManyLoops +=1;
    if(howManyLoops == (anime.length)*3){
        callback();
        return 1;
    }
    
    setTimeout(arguments.callee,200);
},200);