JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Welcome to my Site</h1>
<p>The slight bump at end of each transition is because each image is slightly larger than the previous image.</p>
<p>Explanation: This demo uses the PlaceKitten web service to serve up the images. In order to get a different image every 4 secs, the picture dimensions must change. If the requested dimensions did not change, the image would not change -- which would wreck the demo. That is why there is that little bump at the end of each image change.</p>

CSS

body{background-image:url('http://placekitten.com/150/149');background-size:cover;}
h1{color:yellow;text-shadow: 1px 1px 1px #000;font-size:3em;}
p{color:white;text-shadow: 1px 1px 1px #005;font-size:1.7em;}

JavaScript

var cnt=0, bg;
var $body = $('body');
//var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
var arr = [1, 2, 3, 4, 5, 6];

var bgrotater = setInterval(function() {
    if (cnt==5) cnt=0;
    //bg = 'url("' + arr[cnt] + '")';
    bg = 'url("http://placekitten.com/150/15' + arr[cnt] + '")';
    cnt++;
    $body.css({'background-image': bg, 'background-size':'cover', 'transition': '2.5s'});
}, 4000);

//To stop the backgrounds from rotating. Note the critical step above
//of assigning the setInterval function to a variable, in order to
//use it again (below) to stop the repeating function
$('#some_button_id').click(function() {
    clearInterval(bgrotater);
});