<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Светофор. Автор - Федор Власенко</title>
<style>
.signal {
background-color: #000;
padding: 5px;
float: left;
}
.signal div {
list-style: none;
height: 40px;
width: 40px;
border-radius: 50%;
margin: 4px;
opacity: 0.2;
}
.signal .active {
opacity: 1;
}
</style>
</head>
<body>
<div id="signal1" class="signal">
<div></div>
<div></div>
<div></div>
</div>
<script type='text/javascript'>
window.onload = function () {
var traficLight = function (id, path) {
var pathLength = path.length, point = 0;
var signals = [], i, color, animTimer, element;
var alls = document.getElementById(id).getElementsByTagName('div');
for (i = 0; ; i += 1) {
color = ['red', 'yellow', 'green'][i % 3];
alls[i].style.background = color;
signals[color] = alls[i];
if (i == 2) break;
}
var start = function () {
point = (point > pathLength - 1) ? 0 : point;
element = path[point];
if (element.interval == 0) {
blink(element);
} else if (element.dual != '') {
signals[element.color].className = signals[element.dual].className = 'active';
show(element);
} else {
signals[element.color].className = 'active';
show(element);
}
point += 1;
};
var blink = function (element) {
i = 0;
animTimer = setInterval(function () {
signals[element.color].className = (signals[element.color].className == '') ? 'active' : '';
if (++i == 6) {
clearTimeout(animTimer);
start();
}
}, 500);
};
var show = function (element) {
animTimer = setInterval(function () {
clearTimeout(animTimer);
signals[element.color].className = '';
if (element.dual) signals[element.dual].className = '';
start();
}, element.interval);
};
start();
};
var signal = function (color, interval, dual) {
this.color = color;
this.interval = interval || 0;
this.dual = dual || '';
};
var red = new signal('red', 5000);
var redYellow = new signal('red', 2000, 'yellow');
var yellow = new signal('yellow', 3000);
var green = new signal('green', 5000);
var greenBlink = new signal('green');
var traficLight1 = new traficLight('signal1', [green, greenBlink, yellow, red, redYellow]);
};
</script>
</body>
</html>
Попробовал, может кто подскажет лучше реализацию. Здесь основано на задании параметров каждой точки (point) алгоритма