JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div>
    <img src="http://www.artpicturesstudio.com/wp-content/uploads/2012/07/funny-cats.jpg" class="active">
    <img src="http://1.bp.blogspot.com/_OVvmLWt3DKE/S-niFHaNWcI/AAAAAAAAAEM/X3h7vvKwduk/s400/funny-dancing-cats.jpg">
    <img src="http://wondrouspics.com/wp-content/uploads/2011/02/funny-cats1.jpg">
</div>

CSS

div {
    
}

div img.active {
   display: block;
   opacity: 1;
}

div img {
    display: none;
    opacity: 0;
    transition: all 0.25ms ease-in-out;
}

JavaScript

(function(window, document, undefined){
    
    var imgs = document.querySelectorAll('img'),
        loop = function(num){
            var active = document.querySelectorAll('.active');
            active[0].className = '';
            imgs[num].className = 'active';
            num = num + 1;
            if(num >= imgs.length)
                num = 0;
            setTimeout(function(){ loop(num); }, 1000);
        };
    loop(0);

})(window, document);