JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header"></div>
CSS
.header{
background: #333 url('http://flaticons.net/icons/Emotions/Cheeky.png') no-repeat;
width: 100%;
height: 262px;
}
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;
$('.header').fadeOut(300).css('background-image':'url('+curImage+')'}).fadeIn();
});
}, 1500);
});