transiciones, sliders y slideshows
En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.
Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:
La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que queramos mostrar por defecto y class="novisible" en el resto de ellas.
Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:
En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.
- Y Listo! → ¿Te gusto? Síguenos en nuestras redes sociales.
- Si tienes dudas, comenta todas serán respondidas.
0 comments :