0

Se me debe actualizar imagen a imagen, no una debajo de otra.

Dejo el código comentado para que vean lo que sucede:

<script type="text/javascript">

    function contadorTiempo() {

        // Actualiza de imagen cada 500 milisegundos

        tiempo = setInterval(cambiarImagenes, 500);
    }
                
    function cambiarImagenes() {
        // Array con todas las imagenes

        var misImagenes=new Array();
        misImagenes[0]="<img src='1.jpg'/>";
        misImagenes[1]="<img src='2.jpg'/>";
        misImagenes[2]="<img src='3.jpg'/>";
        var imagenesAleatorias = Math.floor(Math.random()*misImagenes.length);
                

        // Muestra el array de imagenes

        document.write(misImagenes[imagenesAleatorias]);
    }                
</script>
3
  • Qué quieres decir con detrás? Lo que estás haciendo es hacer un output en cada ejecución, así que irá añadiendo elementos img, uno después del otro y el navegador los pinta como mejor puede de acuerdo al tamaño de la imagen y de la ventana. No le estás diciendo que reemplace nada ni que cambie el contenido de ninguna etiqueta. Tooooodos los img se siguen mostrando, añadiendo uno cada 500ms. ¿Qué quieres que haga el script en vez de esto?
    – Alfabravo
    Commented el 27 oct. 2020 a las 19:08
  • No tengo mucha idea de javascript, es un ejercicio que me han mandado de clase. Lo que me pide el ejercicio es que consiga que salga una foto, pasen 5000ms, y se muestre una nueva imagen y así todo el rato. Osea mi objetivo no es que salga una imagen debajo de otra, sino por así decirlo se actualice la página con una nueva imagen (que vaya una a una)
    – eliaskrr
    Commented el 27 oct. 2020 a las 21:14
  • ENtonces, la respuesta que te dieron abajo posiblemente hace lo que necesitas. Revísala! :)
    – Alfabravo
    Commented el 27 oct. 2020 a las 21:31

1 respuesta 1

2

1.- Lo que yo te recomendaría es que solo cambies el src de tu imagen. Te muestro un ejemplo con codigo comentado para que puedas entenderlo mejor:

contadorTiempo();

function contadorTiempo() {
  // Actualiza de imagen cada 500 milisegundos

  tiempo = setInterval(cambiarImagenes, 500);
}

function cambiarImagenes() {
  /*
   TU ARRAY SOLO TENDRA LA URL
   DE TUS IMAGENES EJEMPLO:
  */
  var misImagenes = new Array();
  misImagenes[0] =
    "https://w7.pngwing.com/pngs/409/3/png-transparent-computer-icons-hand-drawn-spaceship-fictional-character-extraterrestrial-life-svg.png";
  misImagenes[1] =
    "https://images.vexels.com/media/users/3/150029/isolated/preview/720f580b125869ed3c96dc146df8a6d7-icono-plano-de-nave-espacial-by-vexels.png";
  misImagenes[2] = "https://svgsilh.com/svg/158234.svg";
  var imagenesAleatorias = Math.floor(Math.random() * misImagenes.length);

  // ACCEDEMOS A NUESTRA IMAGEN Y LE CAMBIAMOS SU SRC

  document
    .querySelector("img")
    .setAttribute("src", misImagenes[imagenesAleatorias]);
}
img {
  width: 200px;
  height: 200px;
}
<img />

Te dejo un enlace para que profundices más en el tema sobre setAttribute:

Element.setAttribute

5
  • Me podrías explicar la parte del src del setAttribute?
    – eliaskrr
    Commented el 27 oct. 2020 a las 21:40
  • 1
    ¡Claro que sí! Recuerda que todos los elementos de nuestro HTML contienen atributos y dentro un valor, por ejemplo: type="text" , id="30", src="miRuta" Nota que cada uno tiene el nombre del atributo y su valor, lo que estamos haciendo es asignarle a nuestra imagen el atributo src y lo hacemos con setAttribute, este recibe como parámetro el nombre del atributo y el valor que tendrá, como se trata de una imagen, podemos asignarle ese atributo. Commented el 27 oct. 2020 a las 22:09
  • Lo acabo de probar, he añadido en el cuerpo de HTL <img src="" onload="miFuncion"> no se mi sustituye nada, aunque me aparece un cuadrado vacío al cargar la página
    – eliaskrr
    Commented el 29 oct. 2020 a las 7:18
  • Eso que estás haciendo es incorrecto te recomiendo que analices a detalle el código que te compartí. Que es myFunction ?? En el código que compartes al inicio no hay ninguna función con ese nombre. Commented el 29 oct. 2020 a las 13:45
  • ah no eso es un ejemplo que te he puesto, pero he utilizado mi función contadorTiempo(). Yo de lo que me he enterado es que con el método guerySelector seleccionamos aquello que tenga el msmo nombre dentro de nuestro método (es decir querySelector("img") y con el método que le sigue sustituimos "src" por nuestro array de imagenes que hemos elegido "misImagenes[imagenesAleatorias]. Es así no el proceso de todo el método, no?
    – eliaskrr
    Commented el 29 oct. 2020 a las 21:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.