Bueno anduve algo ocupado y no tuve tiempo de terminarlo antes pero finalmente me salio así que aquí se los dejo :)
espero que le sea de ayuda a alguien o lo sigamos mejorando acá.
Cualquier sugerencia es bienvenida!!
Saludos
Código:
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
FUNCIÓN PARA CARGAR UNA IMAGEN ALEATORIAMENTE
con la opción de que cambie cada vez que se ingresa a la página
o que se cambie cada un tiempo predefinido.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* ====================================================================================
las imagenes estarán en una carpeta llamada 'imgram'.
las imagenes deberán estár numeradas 1.jpg, 2.jpg... (no se usa 0.jpg)
==================================================================================== */
/*--------------------------------------------------------
Editar esta parte con la CONFIGURACIÓN según sea el caso
--------------------------------------------------------*/
// CANTIDAD DE IMAGENES
var cant_img = 10
//DURACIÓN DE CADA IMAGEN EN MILISEGUNDOS (1 segundo = 1000, 20 segundos = 20000)
var t_img = 1000
//Función que devuelve una imagen aleatoria.
function cambiar()
{
/* ========== EXPLICACIÓN DE FORMULA PARA EL NÚMERO ALEATORIO ENTRE 1 Y 10 ==========
Math.ceil() Redondea un número hacia arriba (por lo cual no puede dar Cero).
Math.random() Genera un número aleatorio entre 0.0 y 1.0.
en el ejemplo multiplicamos esa variable por el número de imagenes que tenemos.
En este caso es: 0.0 a 1.0 * 10. Esto nos devolvería una variable de números entre 0 y 10.
Como no vamos a usar la imagen 0.jpg a esta función 'Math.random()*10' la redondeamos hacia arriba
con la función Math.ceil() por lo que tendremos una variable de números de 1 a 10.
*/
//Genera sobre la variable 'img' un número entre 1 y el número de la variable 'cant_img'.
img = Math.ceil(Math.random()*cant_img);
imagen=new Image
//Inserta la ruta de la imagen concatenando el número aleatorio y la extensión '.jpg'.
//en este caso le agregamos "imgram/" porque están dentro de una carpeta.
//si no escribiriamos ' imagen.src=img + ".jpg" '.
imagen.src="imgram/" + img + ".jpg" //Cambiar '.jpg' para usar otro tipo de imagen como '.gif'
//Inserta la ruta de la imagen (imagen.src) al objeto 'imagen' insertado en la página html.
document.images['imagen'].src=imagen.src
} //fin función cambiar()
/* ::::::::::: PASOS PARA USAR EL SCRIPT :::::::::::
::::::::: PRIMER PASO :::::::::
Crear un archivo 'ejemplo.js' con el código arriba escrito y ponerlo en el mismo
directorio del archivo de la página html donde se vaya a usar la imagen aleatoria.
::::::::: SEGUNDO PASO :::::::::
Esta función es llamada luego desde el documento principal
primero incluyendo éste archivo 'ejemplo.js' en la página, de la siguiente manera.
Éste código va entre las cabeceras <head> y </head>
<head>
<script src="ejemplo.js" type="text/javascript"></script>
</head>
::::::::: TERCER PASO :::::::::
_____Opción uno_____
Luego para ejecutar la función solo debemos insertar la función entre dos etiquetas <script></script>
<script language="JavaScript" type="text/javascript">
cambiar();
</script>
_____Opción dos_____
Si queremos que la imagen cambie cada determinado tiempo, y no solo al cargar la página, pondremos
la función de la siguiente manera.
<script language="JavaScript" type="text/javascript">
setInterval("cambiar()",t_img);
</script>
la función 'setInterval(evento,intervalo)' repite, o llama a la función ingresada en 'evento'
cada tantos segundos como le pongamos en 'intervalo'.
En éste caso el intervalo lo ponemos como la variable 't_img' a la que se le otorga el valor en el
archivo ejemplo.js
_____otras opciones_____
podemos también insertar lo anterios en el evento de algún botón, al seleccionar una selda, escribir
un texto en un input text, etc.
::::::::: ULTIMO PASO :::::::::
Insertar donde se quiera la imagen el siguiente código
<img src="" name="imagen">
como se ve, es una imagen sin declarar su ruta 'src=""' y con el nombre "imagen" que luego será usado
por la funcion cambiar(). por eso es importante usar el mismo nombre en la imagen y en la función.
::::::::: El documento HTML quedaría de la siguiente manera :::::::::
<html>
<head>
<title>Imagen aleatoria con java script</title>
<!-- Incluímos el archivo imagenes.js con el código JavaScript -->
<script src="imagenes.js" type="text/javascript"></script>
</head>
<body>
<!-- Esta es la imagen con el nombre 'img' que irá cambiando su valor 'src' -->
<img src="" name="imagen">
<!-- Acá llamamos a la función cambiar() cada x tiempo -->
<script language="JavaScript" type="text/javascript">
setInterval("cambiar()",t_img);
</script>
</body>
</html>
*/
Fernando G. del Castillo