JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div id="pics">
    <center>
        <img src="http://www.placehold.it/100x100/000/fff" id="picFive" />
        <img src="http://www.placehold.it/100x100/f00/fff" id="picTwo" />
        <img src="http://www.placehold.it/100x100/0f0/fff" id="picThree" />
        <img src="http://www.placehold.it/100x100/00f/fff" id="picFour" />
        <img src="http://www.placehold.it/100x100/fff/000" id="picOne" />
    </center>
</div>

CSS

#picOne, #picTwo, #picThree, #picFour, #picFive {
    position:absolute;
    display: none;
}
#pics {
    width:500px;
    height:332px;
}

JavaScript

var idx = 0;
fade();
function fade() {
    if (idx >= $('img').length) idx = 0;
    $('img').eq(idx).fadeIn(1500).delay(3500).fadeOut(1500, fade);
    idx++;
}