¿Como Reducir Lineas de Codigo?

_jesic@ · #1 (**permalink**) 14/01/2008, 10:52

Hola a todos.
Deseo poner en mi pagina imagenes aleatorias sin que estas se repitan, pues bien, encontre el codigo de abajo en este mismo foro, el problema biene aqui: quiero poner por lo menos 20 imagenes y veo que con 3 ya hay demaciadas comparciones "if" (con 20 imagenes seria un codigo interminable). ¿Hay alguna manera de reducir el codigo, tengo la corazonada que con "for" se podia solucionar.

Saludos.

Gracias.

<html>
<head>
<title>
4 imágenes sin repetir
</title>
<script>
var imagenes = [
"f:/Imágenes/DragonBall/028.jpg",
"f:/Imágenes/DragonBall/054.jpg",
"f:/Imágenes/DragonBall/082.jpg",
"f:/Imágenes/DragonBall/boo_02.jpg",
"f:/Imágenes/DragonBall/boo_03.jpg",
"f:/Imágenes/DragonBall/boo_04.jpg",
"f:/Imágenes/DragonBall/boo_05.jpg"
];

var enlaces = [
"e:/DragonBall/028.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"
];

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("h ref", 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]];
}
</script>
</head>
<body onload=azar()>
<a href="#" name="enlace1">
 
</a>
<a href="" name=enlace2>
</a>
<a href="" name=enlace3>
</a>
<table border="1" width="100%">
<tr>
<td width="25%">
<a href="#" name="enlace1">
<img src="" name=imagen1>
</a>
</td>
<td width="25%">
<a href="" name=enlace2>
<img src="" name=imagen2>
</a>
</td>
<td width="25%">
<a href="" name=enlace3>
<img src="" name=imagen3>
</a>
</td>
<td width="25%">
<a href="" name=enlace4>
<img src="" name=imagen4>
</a>
</td>
</tr>
</table>
</body>
</html>

caricatos · #2 (**permalink**) 14/01/2008, 11:54

Hola:

Se me ocurre que podrías hacer un array de los índices posibles ordenados (con un simple bucle), y luego desordenarlo, y obtener siempre los primeros 4 elementos de ese array desordenado...

Para obtener métodos para desordenar puedes verlos en esta página: Arrays / Colecciones en javascript. Nuevos métodos...... y el javascript está en Arrays.js

Si necesitas ayuda para la implementación, danos el aviso.

Saludos

_jesic@ · #3 (**permalink**) 14/01/2008, 12:46

Gracias por tu ayuda "caricatos".
El problema es que no tengo idea como ordenarlos y desordenarlos, que me estoy iniciando en el mundo de programacion.
Saludos.
Gracias.

Shiryu_Libra · #4 (**permalink**) 14/01/2008, 12:53

_jesic@, la primera pagina en la parte inferior te da el codigo que debes seleccionar para Copiar/pegar en tu pagina

p.d. interesante coleccion Master Caricatos

caricatos · #5 (**permalink**) 14/01/2008, 16:54

Cita:

Iniciado por _jesic@

Gracias por tu ayuda "caricatos".
El problema es que no tengo idea como ordenarlos y desordenarlos, que me estoy iniciando en el mundo de programacion.
Saludos.
Gracias.

Hola:

Tal como comenta Shiryu_Libra (¡Hola

!) es cuestión de cortar y pegar, pero considerando que te faltan conocimientos, como tú dices, voy a tratar de poner las bases...

Copiamos primero el método que nos interesa... por ser el más corto, por ej...

Código:

Array.prototype.shuffle = function(){
	romeo = this;
	papa = romeo.length;
	for (sierra = 0;sierra < papa; sierra ++)	{
		quebec = romeo[sierra];
		tango = Math.floor(Math.random()*papa);
		romeo[sierra] = romeo[tango];
		romeo[tango] = quebec;
	}
	return romeo;
}

Luego creamos el array de índices y lo desordenamos;

Código:

var indices = new Array();// pondremos aquí los índices
for (i = 0; i < 20; i ++) indices[i] = i; // para un array de 20 elementos.
desorden = indices.shuffle();

Y ahora usamos los cuatro (n) primeros valores:

document.getElementById("enlace0").href = enlaces[desorden[0]];
document.getElementById("enlace1").href = enlaces[desorden[1]];
document.getElementById("enlace2").href = enlaces[desorden[2]];
document.getElementById("enlace3").href = enlaces[desorden[3]];
...

Cita:

Iniciado por Shiryu_Libra

p.d. interesante coleccion Master Caricatos

Gracias... pero no ha sido más que una recopilación de un trabajo conjunto de unos buenos amiguetes...

Saludos

P.D: por cierto, seguro que tendrás algunos problemas, incluso pude poner yo mismo aldo mal, así que no dudes en seguir preguntando.

_jesic@ · #6 (**permalink**) 15/01/2008, 10:15

Gracias caricatos, este script me vale para lo que yo quiero, a un que no lo entiedo pero lo puedo implimentar en mi pagina.
Muchas gracias.
Saludos.