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]).show().delay(3500).animate({
        opacity: 0.2
    }, {
        step: function (now) {
            var idx = (index + 1) % pictures.length;
            var val = 1.2 - now;
            $("#" + pictures[idx]).show().css("opacity", val);
        },
        complete: function () {
            $("#" + pictures[index++]).hide();
            displayImage();
        }
    });
};

displayImage();