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="wrapper">
<div id="js-imageholder">
</div>
</div>

CSS

#wrapper {
    position: relative;
}
#js-imageholder {
    height: 200px;
    width: 964px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    float: left;
    
    
}
#js-imagePanel {
    display: none;
}
#background-image {
    
}

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;
        var conPos = $("#" + placeholderId).css("position");
        var conTop = $("#" + placeholderId).css("top");
        var conLeft = $("#" + placeholderId).css("left");
        var conW = $("#" + placeholderId).css("width");
        var conH = $("#" + placeholderId).css("height");
        $("#" + placeholderId).parent().append("<div style='display: none;' id='bgEle' />");
                                              $("#bgEle").css({"display" : "block", "position" : "absolute", "top" : conTop, "left" : conLeft, "z-index" : "1", "height" : conH , "width" : conW})
            setInterval(function() {
                var bgUrl = array[i].src;
                $("#" + placeholderId).fadeOut("slow", function(){
                $("#" + placeholderId).fadeIn("slow").css({ "background-image" : "url(" + bgUrl + ")"});
                });
        $("#bgEle").fadeIn("slow").css({"background-image":"url(" + bgUrl + ")"});
                if (i+1 < array.length) { i = i+1; }
                else { i = 0; }
                
            }, wait);
        
    }
            
}