JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pics">
<center>
    <img src="http://lorempixel.com/500/332" width="500" height="332" id="picFive" />
    <img src="http://placekitten.com/500/332" width="500" height="332" id="picTwo" />
    <img src="http://placehold.it/500x332" width="500" height="332" id="picThree" />
    <img src="http://placeimg.com/500/332/any" width="500" height="332" id="picFour" />
    <img src="http://placeimg.com/500/332/tech" width="500" height="332" id="picOne" />
</center>
</div>

CSS

#picOne, #picTwo, #picThree, #picFour, #picFive{
position:absolute;
display: none;
}

#pics {
width:500px;
height:332px;
}

JavaScript

var pictures = ["picOne", "picTwo", "picThree", "picFour", "picFive"];
var index = 0;

var displayImage = function() {
    if (index == pictures.length) { index = 0; }

    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

displayImage();