JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
 <img id="img0" />
 <img id="img1" />
</div>

CSS

#container {position:relative;margin:25px;}
img {position:absolute;top:0;left:0;border:1px solid #7f7f7f;display: none;}
#img1 {z-index:999}

JavaScript

var imgArray = [
    'https://lh4.googleusercontent.com/-JEFd9Bn2cqs/UT9-DaM_wpI/AAAAAAAAA4w/GZ3jVIEpUQ8/s800/image1.jpg'
    ,'https://lh5.googleusercontent.com/-dXG0cK9UdSs/UT9-DaogYgI/AAAAAAAAA4w/8WD2xminsoM/s800/image2.jpg'
    ,'https://lh4.googleusercontent.com/-If4lCQE7lAs/UT9-DTeH4YI/AAAAAAAAA4w/a1Z3fXMlQBA/s800/image3.jpg'
    ]
    , imgCount = imgArray.length
    , currentImg = 0
    , e = 0
    , fadeSpeed = 2000
    , showTime = 5000;

function slideShow() {
	if(e == 2) {e = 0;}
	if(currentImg == imgCount) {currentImg = 0;}
	$("#img"+e)
        .fadeIn(fadeSpeed)
	    .attr("src", imgArray[currentImg]);
	currentImg++;
        e++;
	$("#img"+e).fadeOut(fadeSpeed);
	setTimeout("slideShow()", showTime);
}

slideShow();