JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="IntroRozcestnik" style="width: 600px; height: 250px;">
  Xxxx

  <div id="IntroSwitch01" style="width: 40px; height: 20px; background: red; display: inline-block; border: 1px solid black;"></div>
  <div id="IntroSwitch02" style="width: 40px; height: 20px; background: green; display: inline-block; border: 1px solid black;"></div>
  <div id="IntroSwitch03" style="width: 40px; height: 20px; background: blue; display: inline-block; border: 1px solid black;"></div>
</div>

CSS

#IntroRozcestnik {
  background: yellow;
}

JavaScript

var $autoRotate = true;
var $iRotateMin = 1;
var $iRotateMax = 3;
var $iRotate = $iRotateMin;

$(document).ready(function() {
  rotateBackground();
});

function rotateBackground() {
	//console.log('rotating, iRotate: '+$iRotate);
  if ($autoRotate) {
  	if ($iRotate < $iRotateMax) {
    	$iRotate += 1;
    }
    else {
    	$iRotate = $iRotateMin;
    }
    
    switch ($iRotate) {
      case 1:
        $bg = 'red';
        break;
      case 2:
        $bg = 'green';
        break;
      case 3:
        $bg = 'blue';
        break;
    }
    
    $('#IntroRozcestnik').css('background', $bg);
  }
  
	setTimeout(function() {
  	rotateBackground();
  }, 5000);
}

$('#IntroSwitch01').mouseenter(function() {
	$autoRotate = false;
  $iRotate = 1;
	$('#IntroRozcestnik').css('background','red');
});

$('#IntroSwitch01').mouseleave(function() {
	$autoRotate = true;
});

$('#IntroSwitch02').mouseenter(function() {
	$autoRotate = false;
  $iRotate = 2;
	$('#IntroRozcestnik').css('background','green');
});

$('#IntroSwitch03').mouseleave(function() {
	$autoRotate = true;
});

$('#IntroSwitch03').mouseenter(function() {
	$autoRotate = false;
  $iRotate = 3;
	$('#IntroRozcestnik').css('background','blue');
});

$('#IntroSwitch03').mouseleave(function() {
	$autoRotate = true;
});