JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<div class="item" id="one">Content for Div one to go here</div>
<div class="item" id="two">Content for Div two to go here</div>
<div class="item" id="three">Content for Div three to go here</div>

CSS

html, body {background-color: yellow}
#one {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}

#two {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}

#three {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: green;
  display: none;
}

JavaScript

var i = 0;
var length = $('.item').length;
var variableTime = 3000; //default time
(function Recur(){
	switch(i){
  	case 0:
    variableTime = 5000;
    break;
    case 1: 
    variableTime = 3000;
    break;
    case 2:
    variableTime = 4000;
    break;
  }
  $('.item').eq(i++).delay(variableTime).fadeOut(1000,function(){
    if(i == length){
     i = 0;
    }
    $('.item').eq(i).fadeIn(1000,function(){
       Recur();
    });
  });
})();