вариант ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#myUl{
list-style: none;
width: 120px;
padding: 0;
margin: 0;
overflow: hidden;
}
#myUl li{
float: left;
width: 50px;
height: 50px;
border: 2px solid #FFA000;
margin-right: 5px;
margin-bottom: 5px;
}
#myUl li.active{
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<div id="myHead"></div>
<ul id="myUl">
<li head="Заг А.">A</li>
<li head="Заг Б..">Б</li>
<li head="Заг В...">В</li>
<li head="Заг Г....">Г</li>
</ul>
<script>
var myUl = document.getElementById('myUl'),
myHead = document.getElementById('myHead'),
UlInner = myUl.children,
j = -1,
elem,
is;
function spt(e,el){
elem && (elem.className = '');
j = ++j % UlInner.length ;
elem = el || UlInner[j];
myHead.innerHTML = elem.getAttribute('head');
elem.className = 'active';
!el && (is = window.setTimeout(spt, 1000));
}
spt();
myUl.onmousemove = function (e){ window.clearTimeout(is);
var target = e && e.target || event.srcElement;
if(target.tagName == 'LI') spt(e,target);
}
myUl.onmouseout = spt
</script>
</body>
</html>
