Como lo dije en un pricipio:
Cita:
Iniciado por laratik 
Se me ocurre jugar un poco con setInterval() y setTimeout()
Hay que jugar con estas dos funciones, claro que pensándolo bien, hacerlo de la manera que lo plantee se vuelve enredado y poco sostenible, así que se me ocurrió una nueva idea, donde se pueden manejar mejor los tiempos utilizando recursividad en vez de intervalos. Probado en firefox 4 y funciona bien.
codigo corregido y probado durante 10 minutos:
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 = -1;
function displayContent(id,anima){
if(document.getElementById(id).style.display == 'block'){
document.getElementById(id).style.display='none';
}else{
document.getElementById(id).style.display='block';
}
if(anima) {
ctr = setTimeout("displayContent('"+id+"')",2000);//cuanto tiempo quieres que aparesca en pantalla
ctr2 = setTimeout(cargar,3000);//intervalo entre una imagen y la otra de 1 segundo 3000-2000 = 1000
}
}
function limpiar() {
clearTimeout(ctr);
clearTimeout(ctr2);
document.getElementById("foo").style.display = 'none';
document.getElementById("bar").style.display = 'none';
document.getElementById("baz").style.display = 'none';
i = -1;
}
function cargar() {
if(i==cont.length-1) {
i=-1;
}
i++;
displayContent(cont[i],true);
//setTimeout("displayContent("+cont[i]+",true)",2000);
}
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');this.style.backgroundColor='#eee';" onmouseout="displayContent('foo');cargar();this.style.backgroundColor='#ddd';">foo</li>
<li onmouseover="limpiar();displayContent('bar');this.style.backgroundColor='#eee'" onmouseout="displayContent('bar');cargar();this.style.backgroundColor='#ddd';">bar</li>
<li onmouseover="limpiar(); displayContent('baz');this.style.backgroundColor='#eee'" onmouseout="displayContent('baz');cargar();this.style.backgroundColor='#ddd';">baz</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>