JSFiddle - React, Tailwind, and code Playground

by tracyfu

HTML

<div id="container">
    <img src="http://images1.wikia.nocookie.net/__cb20110731225056/theregularshow/images/8/8c/250px-Mordecai_character.png" id="i1">
    <img src="http://images1.wikia.nocookie.net/__cb20121118041816/theregularshow/images/2/21/250px-Rigby_character_%281%29.png" id="i2">
</div>

CSS

#container {
    margin: 30px;
    position: relative;
}

img {
    position: absolute;
}

#i1 {
    background: #fff;
    border: 1px solid #0f0;
}

#i2 {
    background: #fff;
    border: 1px solid #00f;
    display: none;
    z-index: 2;
}

JavaScript

// my dummy images
var images = ['http://images1.wikia.nocookie.net/__cb20121118041816/theregularshow/images/2/21/250px-Rigby_character_%281%29.png', 'http://images1.wikia.nocookie.net/__cb20110731225056/theregularshow/images/8/8c/250px-Mordecai_character.png', 'http://images4.wikia.nocookie.net/__cb20110702005406/theregularshow/images/thumb/c/c2/Benson_character.png/250px-Benson_character.png'];

var i = setInterval(function(){
    // 'fadeIn' is a jQuery animation
    $('#i2').fadeIn(function(){
        // sets the background image's src to the foreground image's src to create a 'swap'
        $('#i1').attr('src', $(this).attr('src'));
        // hides the image in the foreground
        $('#i2').hide();
        // grabs the next image to fade in
        setImg('#i2');       
    });
}, 3500);

var setImg = function(el){
    var numRand = Math.floor(Math.random()*3);
    $(el).attr('src', images[numRand]);
};