CodePen

HTML

            
              <h1 id="systime">Current time: <span></span></h1>
<ul id="slider">
  <li class="first"></li> <!-- From 0100-0300 hours (GOLD) -->
  <li class="second"></li> <!-- From 0400-0700 hours (YELLOW) -->
  <li class="third"></li> <!-- From 0700-1100 hours (ORANGE) -->
  <li class="fourth"></li> <!-- From 1200-1500 hours (RED) -->
  <li class="fifth"></li> <!-- From 1600-1800 hours (PURPLE) -->
  <li class="sixth"></li> <!-- From 1900-2100 hours (BLUE) -->
  <li class="seventh"></li> <!-- From 2200-2400 hours (GREEN) -->
</ul>
            
          
!
via HTML Inspector

CSS

            
              h1#systime { 
  height: 100px;
  width: 200px;
  z-index: 200;
  position: relative;
}

ul#slider {
  list-style-type: none;
  width: 600px;
  height: 150px;
  overflow: hidden;
}

ul#slider li {
  display: inline-block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 150px;
  width: 600px;
}

ul#slider li.current {
  z-index: 100;
}

ul#slider li.first { background: gold; }
ul#slider li.second { background: yellow; }
ul#slider li.third { background: orange; }
ul#slider li.fourth { background: red; }
ul#slider li.fifth { background: purple; }
ul#slider li.sixth { background: blue; }
ul#slider li.seventh { background: green; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // You can ignore this bit, it's just for the sake of prettiness.
function twoDigits(n){
  if(n < 10)
    return '0' + n; // Add leading zero
  return n;
}

// Let's grab the date/time and narrow it down to hours and minutes. We'll only use hours in our switch.
var d = new Date();
var h = twoDigits(d.getHours());
var m = twoDigits(d.getMinutes());

// This just prints out the current time, so we have something to go by.
$('h1#systime span').text(h + ':' + m);

// This is the meat of the script. Read it carefully, and it should be obvious how it works.
switch (true) {
  case ( (h >= 0) && (h < 4) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.first').addClass('current');
    break;
  case ( (h >= 4) && (h < 8) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.second').addClass('current');
    break;
  case ( (h >= 8) && (h < 13) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.third').addClass('current');
    break;
  case ( (h >= 13) && (h < 16) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.fourth').addClass('current');
    break;
  case ( (h >= 16) && (h < 19) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.fifth').addClass('current');
    break;
  case ( (h >= 19) && (h < 22) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.sixth').addClass('current');
    break;
  case ( (h >= 22) && (h <= 24) ) : 
    $('li.current').removeClass('current');
    $('ul#slider li.seventh').addClass('current');
    break;
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................