JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div id="js-imagePanel">
<img src="http://www.kinsmancreative.com/transfer/test/test_1.jpg">
<img src="http://www.kinsmancreative.com/transfer/test/test_2.jpg">
<img src="http://www.kinsmancreative.com/transfer/test/test_3.jpg">
<img src="http://www.kinsmancreative.com/transfer/test/test_4.jpg">
</div>
<div id="js-imageholder">
</div>

CSS

#js-imageholder {
    position: relative;
    height: 200px;
    width: 964px;
    display: none; 
    
}
#js-imagePanel {
    display: none;
}

JavaScript

$(document).ready(function() {
    var imageArray = new Array();
    $("#js-imagePanel img").each(function(i, image) {
        imageArray[i] = image;
    });
    //$.each(imageArray, function(f,images) {
       //alert("this image: " + images.src);
        //});
    
    rotateImage("js-imageholder", imageArray , "3000");
   
}); 
function rotateImage (placeholderId, array, time) 
{
    if (array.length > 1 && $("#" + placeholderId).length > 0 && time.length > 0 ) {
        var wait = parseInt(time);
        var i = 0;
            setInterval(function() {
              var bgUrl = array[i].src;
                $("#" + placeholderId).fadeOut("slow", function(){
                $("#" + placeholderId).fadeIn("slow").css({"display" : "block", "background-image" : "url(" + bgUrl + ")"});
                });
                if (i+1 < array.length) { i = i+1; }
                else { i = 0; }
                
            }, wait);
        
    }
            
}