JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="headerImage"></div>
</div>

CSS

.header {
    width: 100%;
    height: 262px;
    background: #333
}
.headerImage {
    background: url('http://flaticons.net/icons/Emotions/Cheeky.png') no-repeat;
    width: 100%;
    height: 100%;
}

JavaScript

$(function () {
    var images = ['http://flaticons.net/icons/Emotions/Cheeky.png', 'http://flaticons.net/icons/Emotions/Confused.png', 'http://flaticons.net/icons/Emotions/Love.png', 'http://flaticons.net/icons/Emotions/Speechless.png', 'http://flaticons.net/icons/Emotions/Wink.png', 'http://flaticons.net/icons/Emotions/Worried.png'],
        index = 0,
        maxImages = images.length - 1;
    var timer = setInterval(function () {
        var curImage = images[index];
        index = (index == maxImages) ? 0 : ++index;
        var $headerImage = $('.headerImage');
        $headerImage.animate({
            opacity: 0
        }, function () {
            $headerImage.css({
                'background-image': 'url(' + curImage + ')'
            });
            $headerImage.animate({
                opacity: 1
            })
        });
    }, 1500);
});