Imagen aleatoria en un inicio

jlx4 · #1 (**permalink**) 06/10/2012, 16:22

Hola a todos, me gustaría pedirles ayuda con un script que tengo, verán, el script lo que hace es alternar imágenes en un div en forma aleatoria con su correspondiente enlace guardado en un array, con la ayuda del setinterval realiza el cambio cada 5 segundos, pero, el problema, es que al inicio de cargar la página se demora 5 segundos en aparecer la primera imagen, luego funciona sin ningún problema, alguien tiene alguna sugerencia o modificación para que el script me muestre una imagen aleatoria al momento de cargar la página por primera vez y luego siga operando normalmente?

<SCRIPT LANGUAGE="JavaScript">

banners = new Array();
banners[0]= new Array("1156.png","http://www.enlace1.com");
banners[1]= new Array("1441.png","http://www.enlace2.com");
banners[2]= new Array("2192.png","http://www.enlace3.com");

function cambiarImagen()
{
var ad = parseInt(Math.random() * banners.length);
seleccionado= banners[ad][0];
enlace= banners[ad][1];
document.getElementById('img').src= banners[ad][0];
document.getElementById('link').href= banners[ad][1];
}
setInterval(cambiarImagen,3000)
</SCRIPT>

<a href="" id="link" target="_blank">
<img src="" id="img" width="770" height="330" border="0">
</a>

Sirikon · #2 (**permalink**) 06/10/2012, 18:30

por lo que veo haces la función, y luego haces un setInterval a esa función ya definida.

Creo que bastaría con añadir un onload al body, algo así...

Código HTML:

Ver original<body onload="cambiarImagen();">
...tu pagina web...
</body>

jlx4 · #3 (**permalink**) 06/10/2012, 18:54

No funciona, me imagino que es lo mismo porque estamos diciendo que al recargar la página se ejecute la función, y como tiene un setinterval se ejecutará cada 5 segundos, he estado pensando que quizás deba hacer una función aparte con el mismo array, pero que se ejecute sólo al recargar la página y nada más, y luego continúe la otra función, pero si pudiera juntar todo en una sola función sería más práctico xD

emprear · #4 (**permalink**) 06/10/2012, 20:17

El sistema que estás usando requiere una imagen y un link x defecto, posteriormete la función modificará los atributos src y href, es decir, tenés que usar

Código HTML:

Ver original<a href="link x defecto" id="link" target="_blank">
 <img src="imagen x defecto" id="img" width="770" height="330" border="0">
 </a>

Saludos

jlx4 · #5 (**permalink**) 06/10/2012, 21:12

Funciona, sin embargo, de esta manera la imagen y link del comienzo están fijos y siempre serán lo mismo, y justo lo que necesito, es que la imagen del comienzo sea al azar igual que las que siguen.

furoya · #6 (**permalink**) 07/10/2012, 07:24

jlx4, el código entre etiquetas de código, por favor.

Las respuestas que te dieron hasta ahora están muy bien. Si el escript tal como está (que es tal como te dice emprear) no te sirve porque no inicia con un banner al azar, entonces hay que adaptarlo.

Y la mejor forma sería la propuesta por Sirikon, aunque me queda una duda sobre esa función : en principio,
qué la dispara?.

Deberías poner un ejemplo que podamos probar, así no nos hacés perder el tiempo con mil preguntas que llenan un post inutilmente, y que al final son para ayudarte a vos.

emprear · #7 (**permalink**) 07/10/2012, 08:58

ejecutá la función tambien onload, con lo que la imagen debiera cambiarse.
Edito:
Despiste el mío. Es lo que sugirió @Sirikon +1

Otra cosa a tener en cuenta, si hacés un ramdom y tenés solo 3 imágenes, es probable que veas varias veces la misma antes de que se produzca la rotación.

Te dejo una función para que analices, con lo que se hace el ramdom pero los numeros no se repiten

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
//Método Fisher-Yates
var mezclar = function(n){
for(var j, x, i = n.length; i; j = parseInt(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);
 
return n;
}
var sec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function mostrar(){
var texto = document.getElementById('texto');
var cadena = mezclar(sec).toString();
if(sec.length == 1){
sec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}
texto.innerHTML = cadena[0];
sec.shift();
}
 
setInterval("mostrar()", 1000);
 
//]]>
</script>
</head>
<body onload="mostrar();">
<span id="texto">
</span>
</body>
</html>

Saludos

IsaBelM · #8 (**permalink**) 07/10/2012, 13:57

Cita:

var mezclar = function(n){
for(var j, x, i = n.length; i; j = parseInt(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);

return n;
}

emprear, a ver si estoy equivocada en mi lógica. Math.random redondea al entero mas próximo. ahora supongamos que devuelve .99 y lo multiplicamos por el número de elementos que tiene el array (10), el resultado sería 9.9 y redondea al entero mas próximo (10). pero esa posición no existe en el array. para evitar este posible error

Cita:

Math.floor(Math.random() * largo_array)

furoya · #9 (**permalink**) 07/10/2012, 14:23

Pero el Math.random() sólo crea un número pseudoaleatorio positivo desde cero y menor que uno. En su ejemplo parseInt() le quita el .9 y deja el entero, que es 9.

De todas formas, yo tampoco entiendo bien cómo funciona.

jlx4 · #10 (**permalink**) 07/10/2012, 14:28

Cita:

Iniciado por furoya

jlx4, el código entre etiquetas de código, por favor.

Las respuestas que te dieron hasta ahora están muy bien. Si el escript tal como está (que es tal como te dice emprear) no te sirve porque no inicia con un banner al azar, entonces hay que adaptarlo.

Y la mejor forma sería la propuesta por Sirikon, aunque me queda una duda sobre esa función : en principio,
qué la dispara?.

Deberías poner un ejemplo que podamos probar, así no nos hacés perder el tiempo con mil preguntas que llenan un post inutilmente, y que al final son para ayudarte a vos.

furoya disculpa por las etiquetas de código, no había podido responder con anterioridad, pero, sé que hay que adaptar el script, pero al no ser un gran experto no he logrado dar con la respuesta, de hecho, me he matado pensando en una posible solución, ahora, sé que las respuestas están buenas, la de Sirikon y la de emprear funcionan, pero por sí solas no funcionaban, al combinar ambas si funcionó, se carga una imagen al azar al inicio y después cada 5 segundos, el único problema es que en los navegadores Iexplorer y Firefox se aparece velozmente la imagen por defecto y luego se cambia a una aleatoria, posteriormente continúa normal al cabo de los 5 segundos. En cuanto al disparador la verdad sólo funciona con el setinterval y el valor aleatorio, nada más. El script así como está funciona, la única diferencia sería que el link e imagen aleatorias las tengo dentro de un div.

Cita:

Iniciado por emprear

ejecutá la función tambien onload, con lo que la imagen debiera cambiarse.
Edito:
Despiste el mío. Es lo que sugirió @Sirikon +1

Otra cosa a tener en cuenta, si hacés un ramdom y tenés solo 3 imágenes, es probable que veas varias veces la misma antes de que se produzca la rotación.

Te dejo una función para que analices, con lo que se hace el ramdom pero los numeros no se repiten

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
//Método Fisher-Yates
var mezclar = function(n){
for(var j, x, i = n.length; i; j = parseInt(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);
 
return n;
}
var sec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function mostrar(){
var texto = document.getElementById('texto');
var cadena = mezclar(sec).toString();
if(sec.length == 1){
sec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}
texto.innerHTML = cadena[0];
sec.shift();
}
 
setInterval("mostrar()", 1000);
 
//]]>
</script>
</head>
<body onload="mostrar();">
<span id="texto">
</span>
</body>
</html>

Saludos

Gracias por la función, la voy a analizar, como dato, he probado también agregándole más imágenes, actualmente tengo 5 imágenes en el array con sus respectivos enlaces, el procedimiento es el mismo, eso podría decir, gracias nuevamente.

emprear · #11 (**permalink**) 07/10/2012, 15:04

Cita:

Iniciado por IsaBelM

emprear, a ver si estoy equivocada en mi lógica. Math.random redondea al entero mas próximo. ahora supongamos que devuelve .99 y lo multiplicamos por el número de elementos que tiene el array (10), el resultado sería 9.9 y redondea al entero mas próximo (10). pero esa posición no existe en el array. para evitar este posible error

En realidad es una buena observación, ya que el método original usa Math.floor, convengamos que la función es mérito de los señores Fisher y Yates, a los que , como no recuerdo quien, imaginó como

Cita:

Dos señores con sus gafas de culo de vaso y su barbita rubia llenando de garabatos una enorme pizarra en alguna universidad del medio oeste.

Yo usé parseInt() porque el fragmento viene de otra script en la que si mal no recuerdo, estaba testeando que era más rápido.

Tampoco es cierto, me rompí mucho la cabeza para ver como funcionaba

De todas formas en este caso en particular va a funcionar igual porque trabajamos sobre un valor conocido que siempre nos devolverá un entero, pongo la script completa con lo de las imágenes

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
//Método Fisher-Yates modificado
 
var mezclar = function(n){
for(var j, x, i = n.length; i; j = Math.floor(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);
 
return n;
}
var sec = [0,1,2,3,4,5,6,7];
function mostrar(){
var banners = new Array();
banners[0]= new Array("google.jpg","http://www.enlace1.com","Google");
banners[1]= new Array("foros.jpg","http://www.enlace2.com","FDW");
banners[2]= new Array("body-bottom.png","http://www.enlace3.com","");
banners[3]= new Array("354.gif","http://www.enlace1.com","Google");
banners[4]= new Array("378.gif","http://www.enlace2.com","FDW");
banners[5]= new Array("417.gif","http://www.enlace3.com","");
banners[6]= new Array("469.gif","http://www.enlace1.com","Google");
banners[7]= new Array("481.png","http://www.enlace3.com","");
 
var texto = document.getElementById('texto');
var cadena = mezclar(sec);
if(sec.length == 1){
sec = [0,1,2,3,4,5,6,7];
}
 
var num = cadena[0];
texto.innerHTML = cadena[0];
 document.getElementById('img').src= banners[num][0];
 document.getElementById('link').href= banners[num][1];
 document.getElementById('img').title= banners[num][2];
sec.shift();
}
 
setInterval("mostrar()", 3000);
 
//]]>
</script>
</head>
<body onload="mostrar();">
<span id="texto">
</span>
<br />
<a href="http://google.com" id="link" target="_blank" name="link">
    <img src="google.jpg" id="img" width="770" height="330" border="0" alt="Google" name="img" title="Google"/></a>
</body>
</html>

Saludos

IsaBelM · #12 (**permalink**) 07/10/2012, 15:42

Cita:

Iniciado por furoya

Pero el Math.random() sólo crea un número pseudoaleatorio positivo desde cero y menor que uno. En su ejemplo parseInt() le quita el .9 y deja el entero, que es 9.

De todas formas, yo tampoco entiendo bien cómo funciona.

es entre 0 y 1

emprear, parte de lo que dije anteriormente era erróneo. lo equivoqué con Math.round().

como tenemos que redondear el número generado, la manera de no obtener un entero que este fuera de rango es con Math.floor(). con parseInt se corre ese riesgo, al igual que con Marth.round()

IsaBelM · #13 (**permalink**) 08/10/2012, 13:52

con 3, 5 ó 20 imágenes, tarde mas o tarde menos se producirá una repetición aquí detallo el problema

emprear · #14 (**permalink**) 08/10/2012, 15:14

Cita:

Iniciado por IsaBelM

con 3, 5 ó 20 imágenes, tarde mas o tarde menos se producirá una repetición aquí detallo el problema

Si, es cierto, la idea de lo que puse era que ese conjunto de 8 imágenes originales no se repitiese hasta completar el ciclo, bien puede darse que la ultima imágen de la primera pasada fuesa la primera de la siguiente con lo que se produciría esa suma de tiempos excesivos.
Voy a analizar tu aporte luego, con más tiempo, aunque a primera vista parece más que prometedor.

Saludos

marlanga · #15 (**permalink**) 08/10/2012, 16:01

Modificando ligeramente el algoritmo que puse aquí, puedes conseguir lo que pides:
http://www.forosdelweb.com/f13/rando...epetir-997287/

Mezclas el array, y lo vas recorriendo de 0 hasta su length-1 en cada tick del timeout. Cuando llegues a la última posición, vuelves a mezclar el array y vuelta a empezar.

furoya · #16 (**permalink**) 21/10/2012, 08:21

Cita:

Iniciado por IsaBelM

es entre 0 y 1

Nooop. El sitio está equivocado. Es entre 0 y "casi" 1. Con suerte, llegaría al 0.9 periódico (¿cómo se marca el período con unicode?), y entonces podríamos discutir si en el efecto práctico es '1'. Pero no creo que llegue, ni por azar.

Estoy seguro que el valor pseudoaleatotio lo saca del clock, pero nunca me puse a averiguar cómo lo calcula.

Conviene saberlo, para entender por qué el JS no da reales posibilidades (matemáticas) de hacer cálculos estadísticos de azar.

emprear · #17 (**permalink**) 21/10/2012, 08:50

Cita:

Iniciado por furoya

cómo se marca el período con unicode

Me parece que no existe, porque el arco puede varíar según la cantidad de cifras que contenga el período, generalmente usan los 3 puntos (...)

Saludos

IsaBelM · #18 (**permalink**) 22/10/2012, 04:25

Cita:

Iniciado por furoya

Nooop. El sitio está equivocado. Es entre 0 y "casi" 1. Con suerte, llegaría al 0.9 periódico

es lo que sabía/pensaba, pero por cosas de vagabundeo llegué a ese articulo y pensé - tengo que editarlo - y ahora al consultar la biblia mdn, tendría que editarlo otra vez, pero ya quedaría raro