Galería de Imágenes con jQuery

Galería de Imágenes con jQuery

 jQuery  | 0.4 Mb | Pass:www.detodoprogramacion.com

Descripción:
Les dejo una simple presentacón de imagenes con jQuery, es simple pero a la vez muy útil

Mano a la Obra y nada Mas!
Creamos un div donde mostraremos las imagenes y tambien pondremos las direcciones donde las tenemos almacenadas.

<div class="fadein">
<img src="galleria/img01.jpg">
<img src="galleria/img02.jpg">
<img src="galleria/img03.jpg">
<img src="galleria/img04.jpg">
<img src="galleria/img05.jpg">
</div>

le damos un poco de estilo css para hacerlo aum mas presentable

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}

.fadein {
background:#CCCCCC;
position:relative;
height:272px;
width:400px;
margin:0 auto;
padding: 20px;
 }

.fadein img {
position:absolute;
left:20px; top:20px;
}

agregamos esta linea de código proporcionado por googleapis que es la libreria de jQuery que permitirá que funcione nuestra galería

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Y por último agregamos este script que permite que la galaría vaya cambiando imagen tras imagen

<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

3000: Podemos cambiarlo, es el tiempo que demorará cada imagen es pasar a la siguiente.

  Y el Resultado Será este: