Se me ocurre jugar un poco con setInterval() y setTimeout() de esta manera:
Código HTML:
<html>
<head>
<style>
*{ margin: 0; padding: 0; cursor: default; }
ul{ list-style: none; }
li{
font-size: 16px;
border-bottom: 1px solid #333;
padding: 5px;
background-color: #ddd;
}
#wrapper{ width: 600px; }
#content{
background-color: #eee;
width: 400px;
float: left;
height: 93px;
}
#content div{
display: none;
font-size: 32px;
padding: 5px 10px;
}
#menu{
width: 200px;
float: right;
}
.clear{ clear: both; }
</style>
<script>
var cont = ["foo","bar","baz"];
var i = 0;
var ctr,ctr2;
function displayContent(id,e){
if(document.getElementById(id).style.display == 'block'){
document.getElementById(id).style.display='none';
if(typeof e != "undefined") {
e.target.style.backgroundColor='#ddd';
}
}else{
document.getElementById(id).style.display='block';
if(typeof e != "undefined") {
e.target.style.backgroundColor='#eee';
}
}
}
function limpiar() {
clearInterval(ctr);
clearTimeout(ctr2);
document.getElementById("foo").style.display = 'none';
document.getElementById("bar").style.display = 'none';
document.getElementById("baz").style.display = 'none';
i = 0;
}
function cargar() {
if(i==cont.length) {
i=0;
}
ctr = setInterval("displayContent('"+cont[i]+"')",2000);
i++;
setTimeout("clearInterval("+ctr+")",5000);
ctr2 = setTimeout(cargar,3000);
}
window.onload = cargar;
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="foo">foo content</div>
<div id="bar">bar content</div>
<div id="baz">baz content</div>
</div>
<div id="menu">
<ul>
<li onmouseover="limpiar();displayContent('foo',event);" onmouseout="displayContent('foo',event);cargar();">foo</li>
<li onmouseover="limpiar();displayContent('bar',event);" onmouseout="displayContent('bar',event);cargar();">bar</li>
<li onmouseover="limpiar(); displayContent('baz',event);" onmouseout="displayContent('baz',event);cargar();">baz</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>