En este caso os enseñamos como realizar un sencillo slider, como el que podemos ver debajo de este texto, para poner en vuestra cabecera o en el lugar que deseéis de vuestra web.
Lo primero que debemos hacer es definir una lista con las imágenes que queremos mostrar, esta lista la incluiremos dentro de una capa «div» quedando algo similar a lo siguiente:
<diva id="galeria"> <img src="coche1.jpg" /> <img src="coche2.jpg" /> <img src="coche3.jpg" /> </diva>
A continuación configuraremos las imágenes para que salgan en el tamaño que nosotros deseamos, en este caso las hemos puesto a 600px de ancho y 400px de alto, además de ocultar todas las imagenes y poner un borde al div.
<style type="text/css">
#galeria {
margin: auto;
border: 5px solid #C6F;
overflow: hidden;
position: relative;
height: 400px;
width: 600px;
}
#galeria img {
display: none;
height: 400px;
width: 600px;
position: absolute;
left: 0px;
top: 0px;
}
</style>
Y por ultimo tenemos que añadir el código jQuery que se encargara de hacer aparecer y desaparecer las imágenes oportunamente.
<script type="text/javascript">
function animar(){
if($("#galeria img:visible").length==0 || $("#galeria img:last").is(":visible")){
$("#galeria img").first().fadeIn(1000);
}else{
$("#galeria img:visible").fadeOut(1000).next("img").fadeIn(1000);
}
}
$(document).ready(function(){
animar();
setInterval(animar,3000);
});
</script>
Hay que destacar que lo que hacemos es llamar a la función animar cuando se carga el documento y posteriormente la volvemos a llamar cada 3000 milisegundos, esta función pregunta si no se esta mostrando ninguna imagen o la que se esta mostrando es la última, si es asi muestra la primera imagen de la galeria y sino muestra la imagen siguiente efectuando los efectos fadeOut para la imagen saliente y fadeIn para la nueva imagen.
No debemos olvidar la llamada a jQuery con una llamada similar a al principio de la web:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
