Visor de imágenes automático con JavaScript HTML y CSS

por
Tiempo de lectura: < 1 minuto

Buenos días, hoy os voy a dejar este tutorial sobre como hacer un visor de imágenes automático, con HTML, CSS y JavaScript.

En primer lugar, os voy a mostrar la estructura del proyecto, yo uso como entorno de desarrollo Visual Studio Code, os dejo el enlace para descargarlo. Pero cualquiera que uséis es válido.

este es mi directorio de carpetas

A continuación os dejo el código HTML Y CSS necesario para crearlo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Visor de imágenes - Objeto Array</title>
    <script>
        var miArrayImagenes = ["assets/gato.jpg","assets/koala.jpg","assets/leon.jpg","assets/perro.jpg"];
        var posicion=parseInt(0);

        //indica el tiempo que pasa para ejecutar la función
        setInterval(siguiente,1500);

        function siguiente() {
        //Si la longituz del array es distinto vamos sumando 1 para ir al anterior pero es mayor no suma, te caes por el precipicio
            if (posicion<=miArrayImagenes.length-1) {
                posicion++;
            }
        //pasar de la ultima a la primera
            if (posicion>miArrayImagenes.length-1) {
                posicion=0;
            }
            document.getElementById("fotos").src=miArrayImagenes[posicion];
        }

    </script>
</head>
<body>
    <h1>Visor de Imágenes</h1>
    <div>
        <img src="assets/gato.jpg" id="fotos" height="426" width="640"/>
    </div>
</body>
</html>
body {
    text-align: center;
}

En este caso os dejo el script incrustado en el HTML, pero también se podría hacer creando un fichero JS externo con el script y luego llamarlo en el HTML.

Post Views: 859

Deja un comentario