JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="BannerDiv">
    <div style="background: #990000"></div>
    <div style="background: #009900"></div>
    <div style="background: #000099"></div>
</div>

CSS

#BannerDiv { width: 400px; height: 200px; }
#BannerDiv div { position: absolute; width: 400px; height: 200px; display: none; }

JavaScript

$(function() {
    $('#BannerDiv > :first').show();
    setTimeout(rotate, 1000);
});

function rotate() {
  var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
    setTimeout(rotate, 300);
  }).next().css({ 'z-index': 1 }).show();
  if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}