2 votos

Carga de imágenes aleatoriamente o dinamicamente

Hola buen día, necesito ayuda con lo siguiente, resulta que tengo que mostrar 3 imágenes en el navegador y cuando recargue la página deben de aparecer las mismas imágenes pero un orden diferente o desordenadas, en diferente posición, yo he buscado mucho en Internet y en Google y en la mayoria de los foros aparece que debo de utilizar esta función de Javascript Math.floor(Math.random() , pero la verdad he hecho muchos intentos y no me funciona nose que estaré haciendo mal, por eso estoy acá haciendo la pregunta para ver si alguien me puede ayudar con este problema que tengo, a continuación les dejo mi código. Muchas gracias, saludos...

Codigo Javascript

function cambiar() {
var file_rut = './imagenes/';
var file_exti = '.png';
var img = ['a1','a2','a3'];

  for (var i=0; i < img.length; i++) 
  {
       document.getElementById("loadImage").src = file_rut + img[0] + file_exti;
       document.getElementById("loadImage2").src = file_rut + img[1] + file_exti;
       document.getElementById("loadImage3").src = file_rut + img[2] + file_exti;
  }    

}

Codigo HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title> Class Room Object </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <script type="text/javascript" src="js/modernizr-custom.js"></script>
    <script type="text/javascript" src="js/prefixfree.min.js"></script>
    <script type="text/javascript" src="js/images.js"></script>
    <script src="file_path.txt"></script>
</head>
<body onload="cambiar();">
<div id="content">
    <div class="group">
        <div class="item" id="loadImage-wrap">
        <img id="loadImage"/>
        </div>
    </div>
    <div class="group">
        <div class="item">
         <div class="image1"><audio id="a1"></audio><img class="image1" id="imgla" src="imagenes/can.png" width="162" height="157" onclick="document.getElementById('a1').play()"></div>
        </div>
        <div class="item" id="loadImage-wrap">
        <img id="loadImage2"/>
        </div>
    </div>    
    <div class="group">
        <div class="item" id="loadImage-wrap"><img id="loadImage3"/></div>
</div>
</body>
</html>

2voto

aEscarcha Puntos 220

Estás enfocando mal el javascript, estás haciendo un bucle, pero luego estás poniendo las tres imagenes en cada interacción del bucle. Tienes que añadir alguna forma de ordenar aleatoriamente el array, y después no hace falta que hagas el bucle. Prueba con esto:

function shuffle(array) {
    let counter = array.length;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        let temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

function cambiar() {
    var file_rut = './imagenes/';
    var file_exti = '.png';
    var img = ['a1','a2','a3'];
    /*ordenar de forma aleatoria el array anterior*/
    img = shuffle(img);

    document.getElementById("loadImage").src = file_rut + img[0] + file_exti;
    document.getElementById("loadImage2").src = file_rut + img[1] + file_exti;
    document.getElementById("loadImage3").src = file_rut + img[2] + file_exti;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: