Cambiar imagenes continuamente

nando87dc · #1 (**permalink**) 24/03/2008, 13:53

Estuve buscando por TODOS ladoas un script de java que me baja cambiando una serie de imagenes guardadas en un directorio cada x tiempo.
pase de encontrar solo scripts que se cambiaban la imagen solo al actualizar/recargar la página u otros demaciados extensos y complejos.
Copiando, pegando, recortando y haciendo algo yo hise este script que hace lo que queria.

lo comparto por si a alguien le es de utilidad y depaso para ver si me ayudan a que en vez de seguir los números 1,2,3,4,5,6,7,8,9,10 lo haga aleatoriamente.

también me interesaría que no dependa de que le inserte la cantidad de imagenes que hay y de generar el nombre. Que solo 'tome' imagenes de la carpeta aleatoriamente, aunque ya creo que sería más complejo.

por último :) se puede guardar este código en un archivo independiente (creo extención .js) y llamar solo a la función 'setInterval("cambiar()",1000);' desde la página, sin insertar el codigo entero en cada una de las paginas??

Código:

<body>
<!-- Esta es la imagen con el nombre 'img' que irá cambiando su valor 'src' -->
<img src="" name="img">

<script language="JavaScript" type="text/javascript">
/*
las imagenes estarán en una carpeta llamada 'imgram'.
las imagenes deberán estár numeradas 1.jpg, 2.jpg...

'num_img' es la variable que va a ir cambiando el número de las imagenes
osea que el nombre de la imagen va a ser 'num_img'.jpg

*/

/*se le da un valor inicial a la variable num_img igual a 1, para que refiera a la imagen 1.jpg*/
var num_img=1; 
/*
'cambiar()' es la función que se invocará cada x segundos e ira cambiando las imagenes
*/
	function cambiar() 
	{      
			
		imagen=new Image
		imagen.src="imgram/" + num_img + ".jpg" 
		document.images['img'].src=imagen.src //se le asigna el valor a la imagen 'IMG'
/* se aumenta en +1 el valor de num_img para que la proxima ejecución inserte la imagen siguieinte */
		num_img=num_img+1; 
/* con este IF se comprueba que el valor de imagen no sea mayor que 10, ya que esta es
la cantidad de fotos que hay. Si no es mayor que 10 termina la función.
cuando llegue a ser 11 se resetea el valor de num_img a 1 para que no busque la imagen 11.jpg que
no existe */
		if (num_img>10)
		{
			num_img=1
		}
	}

/* Se indica que se llame a la función cambiar() cada 1 segundo */
setInterval("cambiar()",1000);

</script>

</body>

Saludos

Fernando G. del Castillo

flanagan44 · #2 (**permalink**) 24/03/2008, 15:52

Haber, espero no equivocarme.

Para hacer el random puedes usar el modulo y la funcion random

asi en teoria podrias hacer algo asi como:

var aleatorio = Math.random()%10

si no me equivoco tendria que devolverte numeros aleatorios entre el 0 y el 9

si tienes mas imagenes pues pones el nº mas grande.

Para incluirlo en otro fichero diria que podrias hacer algo asi:

<script language="JavaScript" type="text/javascript" src="NOMBRE FICHERO">

Si me he equivocado en algo que lo digan que lo he dicho de cabeza

Mira acabo de encontrar una funcion que teoricamente (no la he probado) te devuelve numeros entre el rango que tu le digas:

Cita:

function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}

nando87dc · #3 (**permalink**) 24/03/2008, 22:36

mil gracias flanagan44 me abriste la cabeza :D
estuve buscando gracias a tu aporte y encontre esta web

http://flash.elmultiusos.com/doc.php?op=contingut&id=501&g=flash&tit=Uso%20de%2 0Math.random();%20para%20obtener%20valores%20aleat orios&PHPSESSID=c3542df197fffe8bdc296d0a9e43df32

En la cual deduzco que en vez de
aleat = Math.floor(aleat)
debería usar
aleat = Math.ceil(aleat)
ya que éste último redondea hacia arriba...
entendi el funcionamiento, ahora voi a dormir :D

cuando lo termine vuelvo a publicarlo resuelto.

muchas gracias ! siempre me gusto el altruísmo de los foros.

Fernando G. del Castillo

nando87dc · #4 (**permalink**) 26/03/2008, 23:52

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

caricatos · #5 (**permalink**) 27/03/2008, 01:22

Hola:

A mi me gusta más usar un array de imágenes (sus url's)... y luego ir modificando el índice:

var imagenes = ["imagen1.gif" "imagen2.gif", "imagen5.jpg", "imagen.png"];
var indice = 0;

function cambiar() {
document.getElementById("imagen").src = imagenes[indice++ % imagenes.length];
}

setInterval("cambiar()", retardo)

Sobre los números aleatorios tal vez no aparezca alguna por mucho tiempo de la manera que tu planteas, también podría desordenar el array: Arrays / Colecciones en javascript. Nuevos métodos...

Saludos

rogoelpra · #6 (**permalink**) 24/07/2008, 12:23

Hola nando87dc, estuve revisando tu trabajo... Esta bien interesante pero no me funciona... Estas seguro que como esta publicado funciona en Internet Explorer...

Gracias.

ssi · #7 (**permalink**) 16/09/2010, 23:34

Excelente código nando87dc... ya me estaba quebrando la cabeza hace horas... ;)