Div rotatorios

laksman · #1 (**permalink**) 23/03/2011, 09:47

Saludos maestros de Foros del web..! bueno soy principiante en esto, y estoy tatando de hacer es poner tres div (ban1, ban2 y ban3) en el div caja, los tres div tienen el mismo tamaño y ocupan el mismo espacio, lo que quiero es mostrar un div a la vez y uno a continuación de otro configurando sus estilos en display:"block" para el que se va a mostrar y "none", para los siguientes, es decir como un banner rotativo... la idea es sencilla pero no se como hacerlo andar, no encuentro el error, agradecida la respuesta maestros...!
les dejo el html, css y el .js

html

<div id="caja">
<div id="ban1"></div>
<div id="ban2"></div>
<div id="ban3"></div>
</div>

css

#caja {
width:624px;
height:200px;
float:left;
display:inline;}
#ban1 {
width:624px;
height:200px;
background-image:url("objetos/ban11.png");
background-repeat:no-repeat;
float:left;
display:block;}
#ban2 {
width:624px;
height:200px;
background-image:url("objetos/ban21.png");
background-repeat:no-repeat;
float:left;
display:none;}
#ban3 {
width:624px;
height:200px;
background-image:url("objetos/ban31.png");
background-repeat:no-repeat;
float:left;
display:none;}

<script language="javascript">

addEvent(window,'load',nuevas,false);
function addEvent(ele,eve,fun,cap)
{
if (ele.attachEvent)
{
ele.attachEvent('on'+eve,fun);
return true;
}
else
if (ele.addEventListener)
{
ele.addEventListener(eve,fun,cap);
return true;
}
else
return false;
}

/*con la funcion nuevas voy a alimentar a la funcion banner con los parametros para arrancar, estos parametros van a determinar a quien le toca encenderse*/
function nuevas()
{
var v=0;
var x=2;
var z=1;
banner(v,x,z);
}

/* en la funcion banner busco cual esta "none" (apagado) y tenga el numero de control "2" ha ese lo enciendo, luego actualizo los numeros de control y llamo nuevamente a la funcion banner con estos parametro y cada 10 segundo con setTimeout */

function banner(cona,conb,conc)
{
d=cona;
e=conb;
f=conc;
var a=document.getElementById('ban1');
var b=document.getElementById('ban2');
var c=document.getElementById('ban3');
if ( a.style.display=='none' && d==2)
{
b.style.display='none';
c.style.display='none';
a.style.display='block';
}
if ( b.style.display=='none' && e==2)
{
a.style.display='none';
c.style.display='none';
b.style.display='block';
}
if ( c.style.display=='none' && f==2)
{
b.style.display='none';
a.style.display='none';
c.style.display='block';
}
d=d+1;
if (d>2)
{d=0;}
e=e+1;
if (e>2)
{e=0;}
f=f+1;
if (f>2)
{f=0;}
setTimeout("banner(d,e,f)",10);
}
</script>

Naahuel · #2 (**permalink**) 23/03/2011, 12:04

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]

laksman · #3 (**permalink**) 23/03/2011, 12:54

GRACIASSSSSSSSSSSSSSSS NAAHUEL... funciona perfectamente, me queda estudiar como funciona por que la verdad es que no lo entiendo...
pero FUNCIONA...!!! Gracias maestro...

Naahuel · #4 (**permalink**) 23/03/2011, 13:02

La ventaja de jQuery es que tiene una sintaxis muy sencilla de leer y seguir. Te explico un poquito algunas líneas:

var cajas = $('#caja div');: Obtener todos los DIV dentro del elemento con id #caja
var tiempo = 1000;: Tiempo del intervalo de pausa entre cada cambio
setInterval(function(){
var actual = $('#caja div.actual'): Obtener el DIV con la clase .actual
_siguiente(actual);: Llamar a la funcion siguiente para que pase al DIV que le sigue a actual.
}, tiempo);

Función _siguiente:

actual.removeClass('actual');: Quitar la clase .actual al DIV actualmente visible (es decir que se ocultará)
var ind_actual = cajas.index(actual) + 1; Obtener el índice del elemento que le sigue al actual en la variable cajas.
if(ind_actual >= cajas.length){ind_actual = 0}: Si el índice obtenido es mayor o igual al número de DIVs dentro de cajas, poner el índice en 0 para empezar con el primero nuevamente.
$(cajas.get(ind_actual)).addClass('actual');: Agregar clase actual al elemento cuyo indice se obtuvo en las líneas anteriores.

Espero esté claro :)

laksman · #5 (**permalink**) 24/03/2011, 06:39

Alto, claro y comprendido... de nuevo gracias campeon...!!