Foros del Web » Programando para Internet » Javascript »

Rotacion de imagenes

Estas en el tema de Rotacion de imagenes en el foro de Javascript en Foros del Web. Hola, este es mi primer mensaje en esta comunidad y es para pediros consejo. Mi nivel de Java es bastante principante, estoy intentando crear una ...
  #1 (permalink)  
Antiguo 13/05/2005, 12:08
 
Fecha de Ingreso: mayo-2005
Mensajes: 2
Antigüedad: 19 años
Puntos: 0
Rotacion de imagenes

Hola, este es mi primer mensaje en esta comunidad y es para pediros consejo.
Mi nivel de Java es bastante principante, estoy intentando crear una pagina de Cine, y tengo el siguiente problema.
Intento crear una tabla dinámica que me cargue unas imagenes desde un vector de manera aleatoria cada vez que se carga la pagina.
Esto lo he conseguido hacer, pero ahora me interesaria pasarle una función que hiciera que las imagenes tras cargarse fueran rotando cada cierto tiempo.
La idea es cargar una tabla, meter cuatro imagenes dentro y que estas vayan rotando.

Os adjunto el código por si alguien tiene tiempo de echarle un vistazo y corregirme que es lo que hago mal o que me falta para conseguir la función que me permita rotar las imagenes.

Si alguien tiene alguna idea me seria de ayuda. Gracias por adelantado.
[SIZE=1]
<script language="JavaScript" type="text/JavaScript">


var originalsP = ['P03','P04','P06','P02','P01','P05','P07','P09','P 11','P12','P08','P10','P11','P12','P13','P14','P15 ','P16','P17','P18','P19','P20'];
var imatgesP = [];


function DibuixaAlbum()
{
var f,c,k=0;

ColocarImatges();
setTimeout("javascript:Actualitza("+k+")",2000);


document.write("<tr>");
for(c=0;c<4;c++,k++)
{
document.write("<td>");
document.write("<img border src='imatges/"+imatgesP[k]+".jpg'>");
document.write("</td>");
setTimeout("javascript:Actualitza("+k+")",2000);


}
document.write("</tr>");

}


function ColocarImatges()
{
var pos;
while(imatgesP.length<12)
{
pos=parseInt(Math.random()*20);

if(!ImatgesRepetides(pos))
{
imatgesP[imatgesP.length]=originalsP[pos];

}
}
}

function ImatgesRepetides(pos) // para que nome repita las imagenes
{
var cont;
for(cont=0; cont<imatgesP.length ; cont++)
{
if(imatgesP[cont]==originalsP[pos]) return 1; // ??????
}
return 0; // ????
}

function Actualitza(k){

document.write.getElementById('wallpapers').innerH TML.src="imatges/"+imatgesP[k]+".jpg"
k++;
if(k>11) k=0; // cuando ya se hayan visualizado las doce imágenes vuelve a mostrar la primera
setTimeout("Actualitza("+k+")",2000);

}


</script>[/SIZE
]
  #2 (permalink)  
Antiguo 13/05/2005, 17:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otika, bienvenido a los foros :

Creo que Actualiza tiene errores:

function Actualitza(k){

document.getElementById('wallpapers').innerHTML.sr c="imatges/"+imatgesP[k]+".jpg";
k++;
setTimeout("Actualitza("+k % imatgesP.length+")",2000);

}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 14/05/2005, 00:47
 
Fecha de Ingreso: mayo-2005
Mensajes: 2
Antigüedad: 19 años
Puntos: 0
He hecho un copy and paste de la función actualiza pero justo cuando ejecuta la función actualiza me dice que ' se requiere un objeto '.
Me parece que el error lo tengo el 'getElementById'. Lo que yo habia pensando es la primera vez que cargan las imagenes en las tabla, les asigne una 'id' sobre las que ejecutar la función actualiza sobre si mismas.
Pero estoy abierto a escuchar otras propuestas.
  #4 (permalink)  
Antiguo 14/05/2005, 03:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otra vez:

Había otro error al usar .src detrás de innerHTML

De todos modos, recuerdo que tenía algo hecho y te lo voy a enseñar, para ver si te sirve:

Código:
<html>
<head>
<title>
	4 imágenes sin repetir
</title>
<script>
var imagenes = [
	"http://www.sucaricatura.com/2002/maxi/2002H001.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H002.jpg",
	"http://www.sucaricatura.com/2002/maxi/2002H003.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H004.jpg",
	"http://www.sucaricatura.com/2002/maxi/2002H005.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H006.jpg",
	"http://www.sucaricatura.com/2002/maxi/2002H007.jpg"
];

var enlaces = [
	"http://www.sucaricatura.com/2002/mini/2002H001.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H002.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H003.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H004.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H005.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H006.jpg",
	"http://www.sucaricatura.com/2002/mini/2002H007.jpg"
];

function azar()	{
	var temp = new Array(4);
	temp[0] = Math.floor(Math.random() * imagenes.length);
	do
		temp[1] = Math.floor(Math.random() * imagenes.length);
	while (temp[0] == temp[1])
	do
		temp[2] = Math.floor(Math.random() * imagenes.length);
	while (temp[0] == temp[1] || temp[0] == temp[2] || temp[1] == temp[2])
	do
		temp[3] = Math.floor(Math.random() * imagenes.length);
	while (	temp[0] == temp[1] ||
		temp[0] == temp[2] ||
		temp[1] == temp[2] ||
		temp[0] == temp[3] ||
		temp[1] == temp[3] ||
		temp[2] == temp[3]
)
//	alert(document.links.length);
	document.getElementById("enlace1").setAttribute("href", enlaces[temp[0]]);
	document.getElementById("enlace2").href = enlaces[temp[1]];
	document.getElementById("enlace3").href = enlaces[temp[2]];
	document.getElementById("enlace4").href = enlaces[temp[3]];
	document.images.imagen1.src = imagenes[temp[0]];
	document.images.imagen2.src = imagenes[temp[1]];
	document.images.imagen3.src = imagenes[temp[2]];
	document.images.imagen4.src = imagenes[temp[3]];
	setTimeout("azar()", 5000)
}
</script>
</head>
<body onload=azar()>
<a href="#" name="enlace1">
<img src="" name=imagen1>
</a>
<a href="" name=enlace2>
<img src="" name=imagen2>
</a>
<a href="" name=enlace3>
<img src="" name=imagen3>
</a>
<a href="" name=enlace4>
<img src="" name=imagen4>
</a>
</body> 
</html>
El script original no tenía la rotación, pero es fácil añadirlo (el setTimeout)

Espero que te sirva.
Sobre el tema, puedes leer este mensaje: http://www.forosdelweb.com/showthread.php?t=169857

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 14/05/2005 a las 03:47
  #5 (permalink)  
Antiguo 14/05/2005, 11:29
 
Fecha de Ingreso: abril-2005
Ubicación: vivo donde puedo
Mensajes: 133
Antigüedad: 19 años
Puntos: 0
yo tengo una cosa igualita que la que tu quieres en mi página pero hasta el lunes no te puedo pasar el código. más abajo tienes la dirección de mi blog, entra y pulsa sobre el enlace "apuntes de informática", sigue hasta el fondo y vuelve a pinchar sobre JSP, te saldrá una ventana emergente con una especie de baner arriba con dibujos que se van rotando. abre el código fuente y verás arriba la dirección de dos archivos js que son los que hacen que funcione todo. si no puedes bajarte los archivos js de mi servidor el lunes te paso el código.
__________________
Visita mi página web.Carlos Zapata Company
Visita mi blog.
Únete a mi lista de correo.
--------------------------------------------------
La identidad no es lo que fuimos, ni lo que creemos que somos; la identidad es cómo miramos la mundo.

José Luis Rodríguez Zapatero, actual presidente del Gobierno español.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:06.