Мой маленький светофор. Учусь я
<!DOCTYPE html>
<html>
<head>
<title>Светофор</title>
<style>
.table33 {
width: 33%;
float: left;
}
.signal {
background-color: #000;
padding: 5px;
float: left;
}
.signal li {
list-style: none;
height: 50px;
width: 50px;
border-radius: 50%;
margin: 4px;
opacity: 0.2;
}
.signal .active {
opacity: 1;
}
.signal .red {
background-color: red;
}
.signal .yellow {
background-color: yellow;
}
.signal .green {
background-color: green;
}
</style>
</head>
<body>
<div class="table33">
<ul id="signal1" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<div class="table33">
<ul id="signal2" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<div class="table33">
<ul id="signal3" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<script>
window.onload = function () {
var signal = function (id, position, interval, reverse) {
position = position || 0;
interval = interval || 1000;
this.start = function(){
var li = document.getElementById(id).getElementsByTagName('li');
li[position].className += ' active';
reverse = reverse || false;
this._timer = setInterval(function (){
for(i = 0; ; i++){
var class_name = li[i].className.split(' ');
if(class_name[1] == 'active'){
li[i].className = class_name[0];
if(i == 2){
i=0;
reverse = true;
} else if(i == 1 && reverse){
i = -1;
reverse = false;
}
li[++i % 3].className += ' '+class_name[1];
break;
}
}
}, interval);
return this;
};
this.stop = function() {
clearInterval(this._timer);
return this;
};
};
var signal1 = new signal('signal1').start();
var signal2 = new signal('signal2', 1).start();
var signal3 = new signal('signal3', 2, 10000).start();
}
</script>
</body>
</html>