JSFiddle - React, Tailwind, and code Playground

by Alex Huber

HTML

<div id="box">
    <div>AAA</div>
    <div>BBB</div>
    <div>CCC</div>
    <div>DDD</div>        
</div>

CSS

#box{
    width: 300px;
    height:150px;   
    font-size:8em;
    position:relative;    
}
div{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    background-color:orange;
    text-align:center;
}

JavaScript

var box=document.getElementById("box");
var index=box.children.length-1;
var active;
var next;

    box.children[0].style.zIndex="1";
    box.children[1].style.zIndex="1";
    box.children[2].style.zIndex="1";
    box.children[3].style.zIndex="1";

var timer1=setInterval(function(){

    active=box.children[index];
    next=(index > 0) ? box.children[index-1] : box.children[box.children.length-1];
    
    active.style.zIndex="3";
    next.style.zIndex="2";
     
    var opa=1.0;
    var timer2=setInterval(function(){
        if (opa <=0){    
            
            active.style.zIndex="1";
            active.style.opacity="1.0";
            next.style.zIndex="3";
            
            clearInterval(timer2);            
        }
        else {
           active.style.opacity=opa;
           opa-=0.1;
        }
    }, 50);      
          
    index-=1;
    if(index<0) index=box.children.length-1;            
    
}, 2000);