JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo" style="display: none;">

</div>

CSS

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

JavaScript

var timeBetweenBackgrounds = 2000; // in milliseconds - change this to 7200000 for 2 hours

var d = new Date();
var hour = d.getHours();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  $('#backgroundOne').addClass('bg-' + bgNumber);

  setBackground();
  window.setInterval(setBackground, (timeBetweenBackgrounds - 10));

});

var activeBackground = bgNumber;
var activeDiv = 1;

function setBackground() {

  if (activeDiv == 1) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container One. Fading in container Two.');
    $('#backgroundTwo').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundOne').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 2;
    });

  }
  if (activeDiv == 2) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container Two. Fading in container One.');
    $('#backgroundOne').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundTwo').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 1;
    });

  }

}


//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 2)
    return 11;
  else if (hour >= 22)
    return 10;
  else if (hour >= 21)
    return 9;
  else if (hour >= 19)
    return 8;
  else if (hour >= 16)
    return 7;
  else if (hour >= 15)
    return 6;
  else if (hour >= 13)
    return 5;
  else if...