Carrusel de fotos con CSS mejorado con JavaScript

Icono de un tiovivo

Son vínculos a fotos que se desvanecen mediante una transición CSS.

Con JavaScript borramos del historial de navegación a las fotos y además temporalizamos la transición a la siguiente foto

Versiones

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="carrusel_b">
    <ul class="photos_b">
    <li><img id="foto1" src="imgs/delfines.jpg" width="800" height="600"/></li>
    <li><img id="foto2" src="imgs/albatros.jpg" width="800" height="600"/></li>
    <li><img id="foto3" src="imgs/halcon.jpg" width="800" height="600"/></li>
    </ul>
    <ul class="links_b">
    <li><a href="#foto1">Delfines</a></li>
    <li><a href="#foto2">Albatros</a></li>
    <li><a href="#foto3">Halcón</a></li>
    </ul>
    </div>
  3. Descarga y copia el archivo carrusel_b.css y carrusel_b.js dentro de tu web
  4. Crea un enlace a cada archivo en el HEAD de tu página web:
    <link href="carrusel_b.css" rel="stylesheet" type="text/css" />
    <script src="carrusel_b.js"></script>
  5. Copia y adapta el siguiente SCRIPT dentro del HEAD de tu página web:
    <script>
    function principal() { // onload body
    new CarruselB({
    id: "carrusel_b",
    waiting: 7000, // milliseconds (false per desactivar)
    });
    }
    </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>

Funcionamiento

  1. La animación de las fotos está codificada en el CSS

    • En el HTML los enlaces href="#fotoN" apuntan a la foto id="fotoN"
    • Al picar en un enlace la dirección URL cambia a #fotoN
    • En CSS la imagen con el identificador indicado en la URL es img:target
    • Creamos una transición de opacidad entre img y img:target
  2. Anular el historial con JavaScript

    • Cada enlace de foto picado va quedando en el historial de navegación
    • Hay que evitar que al ir atrás en la navegación vuelva a las fotos anteriores
    • En JavaScript anulamos el enlace mediante una función en onclick
    • La función navega por las fotos pero sin acumular el historial de navegación
  3. Temporalizar el cambio de fotos con JavaScript

    • El cambio a la siguiente foto se temporaliza con la función setTimeout
    • El parámetro waiting son los milisegundos de espera antes de cambiar
    • Si dicho parámetro vale false se anula la temporalización
    • El tiempo que dura la animación está codificado en el archivo CSS

Comentarios

  1. 1 Mariano 2015-05-19 Hace 3 años
    Hola, me ha parecido muy chulo el tutorial, estoy intentando acoplarlo a una web que tengo que hacer para un curso que estoy haciendo, el slider funciona pero me aparece la imagen un poco desplazada la imagen con respecto al marco. Además cuando carga la segunda imagen la web me hace una especie de desplazamiento hacia abajo y se queda en esa posición, si vuelvo a subir la web mediante la scroll bar a volverse a cargar una imagen se me vuelve a desplazar.

    Alguna sugerencia?

    Muchas gracias.
  2. 2 Paloma 2016-04-16 Hace un año
    Hola, me ha gustado mucho el manual del Carrusel, pero no se realizar lo del temporizador para que cada X tiempo se vayan pasando las fotos. Como sería?
    Gracias
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