Galería de Imagenes Aleatorias

Say_No_More · #1 (**permalink**) 15/06/2005, 23:02

Hola amigos, necesito una manito.....

estoy armando una web y necesito armar una galeria

en ralidad una pagina que muestre una imagen y se cambie a x segundos por otra, pero que no siga un orden sino que sea aleatorio.
es decir para que no siempre muestre la foo 1 en primer lugar y la 2 en segundo etc. sino que muestre la 15 en primer lugar, la 1 en segundo, y al entrar el visitante en otra oportunidad que uestre la 3 en primer lugar la 5 en segundo etc etc etc...
espero que me puedan ayudar
desde ya 1000 GraCias!!

leonardop · #2 (**permalink**) 23/06/2005, 07:31

Es un problema interesante. Lo que se me ocurre es algo como esto:

Código HTML:

<html>
  <head>
    <title>
      Prueba de rotaci&oacute;n aleatoria de im&aacute;genes
    </title>

    <script type="text/javascript">
      <!--

// Conjunto de nombres de las imagenes a rotar
imagenes = new Array (
    'imagen1.jpg',
    'imagen2.jpg',
    'imagen3.jpg',
    'imagen4.jpg',
    'imagen5.jpg');

// Tiempo de espera entre imagenes (en segundos)
espera = 5;

// Referencia a la imagen actual
imagen_actual = 0;



function cambiar_imagen ()
{
    elemento_img = document.getElementsByName('imagen_principal')[0];

    elemento_img.src = imagenes[imagen_actual++];

    if (imagen_actual >= imagenes.length)
        imagen_actual = 0;

    // Llamar esta misma funcion cada cierto tiempo
    self.setTimeout ('cambiar_imagen()', espera * 1000);
}


function iniciar_rotacion ()
{
    var aux, i, pos;


    // Mover aleatoriamente las imagenes en el array. No es un
    // algoritmo muy bueno, pero es suficiente para cosas simples.
    for (i = 0; i < imagenes.length; i++) {
        // Elegir una posicion pseudo-aleatoria en el array
        pos = Math.floor (Math.random () * imagenes.length);

        // Intercambiar la posicion actual con 'pos'
        if (pos != i) {
            aux = imagenes[i];
            imagenes[i] = imagenes[pos];
            imagenes[pos] = aux;
        }
    }

    // Cambiar la imagen por primera vez
    cambiar_imagen ();
}

      -->
    </script>
  </head>
  <body onload="iniciar_rotacion()">
    <h2>Imagen de prueba</h2>
    <img name="imagen_principal" alt="Esta es una imagen que rota" />
  </body>
</html>

Quizás pueda servirte al menos como guía para crear lo que quieres.

Say_No_More · #3 (**permalink**) 01/08/2005, 23:31

Gracias voy a intentarlo