JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="gif-wrapper">
<div id="0" class="gif-container">
<img class="gif-change" src="https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif">
</div>
<div id="1" class="gif-container">
<img class="gif-change" src=''>
</div>
</div>
CSS
div {
width: 200px;
}
img {
width: 100%;
}
JavaScript
var gifs = ['https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif', 'http://67.media.tumblr.com/3477cac5f71987b0775c219e2925f41a/tumblr_o9pxbm6ACi1r9mp00o1_500.gif'];
var totalGifs = gifs.length;
var gifShow = 0;
$('.gif-wrapper .gif-container:gt(0)').hide();
var changeTimer = setInterval(function() {
$('.gif-wrapper .gif-container').hide();
gifShow++;
if(gifShow == totalGifs) gifShow = 0;
$('.gif-wrapper #' +gifShow+ ' img.gif-change').prop('src', gifs[gifShow]+ '?'+ new Date().getTime());
$('.gif-wrapper #' +gifShow).show();
}, 1000);