<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: rgb(255, 255, 255);
    }

    .box {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>
    <div class="box" tabindex="-1" id="box0"></div>
    <div class="box" tabindex="-1" id="box1"></div>
    <div class="box" tabindex="-1" id="box2"></div>
  </div>

  <script>
    box0 = document.getElementById("box0")
    box1 = document.getElementById("box1")
    box2 = document.getElementById("box2")

    box0.addEventListener("focus", function(){
      box0.style.background = "#FF5468";
    });
    box0.addEventListener("blur", function(){
      box0.style.background = "#FFF";
    });

    box1.addEventListener("focus", function(){
      box1.style.background = "#FABE4D";
    });
    box1.addEventListener("blur", function(){
      box1.style.background = "#FFF";
    });

    box2.addEventListener("focus", function(){
      box2.style.background = "#4DFA90";
    });
    box2.addEventListener("blur", function(){
      box2.style.background = "#FFF";
    });

    i = 1;
    handle = window.setTimeout(callback, 500);
    function callback() {
      i = (i + 2) % 3;
      document.getElementById("box" + i).focus();
      handle = window.setTimeout(callback, 1000);
    }
  </script>
</body>
</html>