Es más fácil con jQuery (perdón, pero no entiendo bien tu código):
Código HTML:
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
var cajas = $('#caja div');
$('#siguiente').click(function(evento){
evento.preventDefault();
var actual = $('#caja div.actual')
_siguiente(actual);
});
$('#anterior').click(function(evento){
evento.preventDefault();
var actual = $('#caja div.actual')
_anterior(actual);
});
//funciones
function _siguiente(actual){
actual.removeClass('actual');
var ind_actual = cajas.index(actual) + 1;
if(ind_actual >= cajas.length){ind_actual = 0}
$(cajas.get(ind_actual)).addClass('actual');
}
function _anterior(actual){
actual.removeClass('actual');
var ind_actual = cajas.index(actual) - 1;
if(ind_actual >= cajas.length){ind_actual = 0}
$(cajas.get(ind_actual)).addClass('actual');
}
});
</script>
<style>
#caja div{
display:none;
width:200px;
height:200px;
}
#caja .actual{
display:block;
}
</style>
</head>
<body>
<div id="caja">
<div id="ban1" style="background:yellow">
<h2>Ban1</h2>
</div>
<div id="ban2" class="actual" style="background:red">
<h2>Ban2</h2>
</div>
<div id="ban3" style="background:blue">
<h2>Ban3</h2>
</div>
<p><a id="anterior" href="#">Anterior</a> | <a id="siguiente" href="#">Siguiente</a></p>
</div>
</body>
</html> Acá lo podés ver en funcionamiento:
[URL="http://jsbin.com/oseka3"]http://jsbin.com/oseka3[/URL]
Probá ese ejemplo. Con la clase "actual" indicás con qué DIV comienzas y qué atributos querés que tenga el DIV con esa clase. Y para hacerlo que rote por tiempo, es más fácil pues sólo tiene que usar setInterval() para llamar a _siguiente() o _anterior() en un cierto tiempo:
Código HTML:
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
var cajas = $('#caja div');
var tiempo = 1000;
setInterval(function(){
var actual = $('#caja div.actual')
_siguiente(actual);
}, tiempo);
//funciones
function _siguiente(actual){
actual.removeClass('actual');
var ind_actual = cajas.index(actual) + 1;
if(ind_actual >= cajas.length){ind_actual = 0}
$(cajas.get(ind_actual)).addClass('actual');
}
function _anterior(actual){
actual.removeClass('actual');
var ind_actual = cajas.index(actual) - 1;
if(ind_actual >= cajas.length){ind_actual = 0}
$(cajas.get(ind_actual)).addClass('actual');
}
});
</script>
<style>
#caja div{
display:none;
width:200px;
height:200px;
}
#caja .actual{
display:block;
}
</style>
</head>
<body>
<div id="caja">
<div id="ban1" style="background:yellow">
<h2>Ban1</h2>
</div>
<div id="ban2" class="actual" style="background:red">
<h2>Ban2</h2>
</div>
<div id="ban3" style="background:blue">
<h2>Ban3</h2>
</div>
</div>
</body>
</html> Acá está en funcionamiento:
[URL="http://jsbin.com/ezeva5"]http://jsbin.com/ezeva5[/URL]