JSFiddle - React, Tailwind, and code Playground

HTML

<div id="transitionImagePlaceHolder">

      <img class="active" src="http://www.techdirt.com/images/twitter.png" />
      <img src="http://www.techdirt.com/images/rss.png" />
      <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />
</div>

CSS

#transitionImagePlaceHolder
    {

    }


    #transitionImagePlaceHolder
    {
        position:relative;
        left: 26px;
    }

    #transitionImagePlaceHolder img
    {
        display:none;
        position:absolute;
        top:4;
        left:10;
    }

JavaScript

function swapImages() {
    var $active = $('#transitionImagePlaceHolder .active');
    var $next = ($('#transitionImagePlaceHolder .active').next().length > 0) ? $('#transitionImagePlaceHolder .active').next() : $('#transitionImagePlaceHolder img:first');

    $active.fadeOut( 'slow', function () {
        $next.fadeIn('slow').addClass('active');
        $active.removeClass('active');
    });
}

setInterval("swapImages()", 1000);