Carrusel de fotos con JavaScript

Icono de tiovivo

Deslizamiento (Slider) de fotos codificado en JavaScript sin utilizar ningún Framework.

Se puede configurar el tiempo de espera y de animación. Tiene 3 tipos de efectos: opacidad, escalado y deslizamiento.

Versiones

Ejemplo HTML Fuente JavaScript Notas
galeria_a.html galeria_a.js Código estático
galeria_b.html galeria_b.js Código encapsulado
galeria_c.html galeria_c.js Varios efectos de animación

Demostración

Modo de empleo

  1. Crea una subcarpeta imgs en tu web y coloca dentro varias fotos. A ser posible que todas tengan el mismo tamaño.

    Por ejemplo: "delfines.jpg", "albatros.jpg" y "halcon.jpg" de 800×600 píxeles

  2. En la parte del BODY de tu página web donde quieras que salgan las fotos, inserta el siguiente código HTML:
    <div id="galeria_c">
    <img />
    <img />
    </div>
  3. Descarga y copia el archivo galeria_c.js dentro de tu web
  4. Crea un enlace a dicho archivo en el HEAD de tu página web:
    <script src="galeria_c.js"></script>
  5. Copia y adapta el siguiente SCRIPT dentro del HEAD de tu página web:
    <script>
    function principal() {
    new GaleriaC({
    id: 'galeria_c',
    subcarpeta: 'imgs/',
    llista: [ "delfines.jpg", "albatros.jpg", "halcon.jpg" ],
    amplada: 800, // píxels
    alcada: 600, // píxels
    aleatori: false,
    tempsEspera: 4000, // millisegons
    tempsTransicio: 2000, // millisegons
    fps: 25, // fotogrames per segon
    acceleracio: 'easeOutCubic',
    efecteEscalat: true,
    efecteOpacitat: true,
    efecteLliscat: true,
    });
    }
    </script>
  6. Llama a la función principal del SCRIPT anterior al acabar de cargar la página web. Para ello utiliza uno de estos dos métodos:
    • Modifica la etiqueta BODY de tu página web:
      <body onload="principal()">
    • O bien crea el siguiente SCRIPT al final de tu página web:
      <script> principal(); </script>

Parámetros

Parámetro Ejemplo Explicación
id'galeria_c'Identificador del DIV con las fotos
subcarpeta'imgs/'Subcarpeta con las fotos
llista[ "delfines.jpg", "albatros.jpg", "halcon.jpg" ]Lista de las fotos en la subcarpeta
amplada800Ancho en píxeles
alcada600Alto en píxeles
aleatorifalseFotos en orden aleatorio o secuencial
tempsEspera4000Milisegundos de espera
tempsTransicio2000Milisegundos de animación
fps25Fotogramas por segundo
acceleracio'easeOutCubic'Aceleración: lineal, easeInQuad, easeOutQuad, easeInCubic, easeOutCubic
efecteEscalattrueEfecto de escalado
efecteOpacitattrueEfecto de opacidad
efecteLliscattrueEfecto de deslizamiento

Comentarios

  1. 1 Francisco 2013-06-16 Hace 4 años
    Si se desactiva el JavaScript se podría poner una foto por defecto en una de las etiquetas IMG del código HTML.
Proinf.net, ©2003-2017 ci 3.1.6 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL