JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img1">A</div>
    <div class="img2">B</div>
    <div class="img3">C</div>
    <div class="img4">D</div>

CSS

html, body { height: 100%; }
* { padding: 0; margin: 0; }

div[class^='img'] { 
    position: absolute; 
    height: 100%; width: 100%;
    display: none;
    text-align: center;
    font-size: 30em;
}

body { background-color: red;}

.img1 { background-color: green;}
.img2 { background-color: yellow;}
.img3 { background-color: brown;}
.img4 { background-color: purple;}

JavaScript

var imgs = $("div[class^='img']"), ln = imgs.length;
imgs.eq(ln-1).show();

setInterval(changeBg,800);

var i=0;
function changeBg() {
    imgs.css('z-index','-1')
    .eq(i).css('z-index','1').fadeIn(function(){
       imgs.not(imgs.eq(i)).hide(); 
        i = ++i % ln;
    });
}