JSFiddle - React, Tailwind, and code Playground

HTML

<body >

<div id="div1" style="width: 500px; height: 500px;" >

	<div id="div2" style="width: 500px; height: 500px; ">
	

	</div>

    <label id="lbl" />
    
</div>

JavaScript

var colors = [
	"http://www.robolaranja.com.br/wp-content/uploads/2014/10/Primeira-imagem-do-filme-de-Angry-Birds-%C3%A9-revelada-2.jpg",
    "http://imguol.com/c/noticias/2013/12/13/13dez2013---esta-imagem-mostra-a-nebulosa-de-caranguejo-um-iconico-remanescente-de-supernova-na-nossa-galaxia-vista-do-observatorio-espacial-herschel-e-do-telescopio-hubble-uma-nuvem-de-gas-e-poeira-1386961235961_956x500.jpg",
    "http://wallpaper.ultradownloads.com.br/121350_Papel-de-Parede-Imagem-Abstrata_1920x1200.jpg"
]

var currentDiv = "div2";
var count = 0;
var lenght = colors.length;
var timeForNextImage = 0;
var preloadOk = false;

setInterval(function() {
    
    count ++;
    if (count > lenght) count = 0;
    
   var date = new Date();
   var time = date.getTime();
    
    if  (time > (timeForNextImage - 3000) && preloadOk == false) {
  		preLoad();
    } else if (time > timeForNextImage) {
     	play();   
    }
    
  
    
}, 300);

var play = function() {
 
 	if (currentDiv == "div2") {
     	$('#'+currentDiv).css("visibility", "visible");
    } else {
        $('#div2').css("visibility", "hidden");
    }
    var date = new Date();
    timeForNextImage = 	date.getTime() + 10000;
    preloadOk = false;
    
    $("#lbl").text("div atual: "+currentDiv);
 };

var preLoad = function() {  
    
      if (currentDiv == "div1") {
        currentDiv = "div2";      
    } else {
		currentDiv = "div1";
    }
    
     $("#" + currentDiv).css("background-image", 'url('+colors[count]+')');
    preloadOk = true;
};