Como si de un slider se tratara este código es útil para pequeñas imágenes que queremos alternar sin necesidad de botones de navegación.
<div id="myGallery"> <img src="image1.jpg" class="active" /> <img src="image2.jpg" /> <img src="image3.jpg" /> </div>
CSS
#myGallery{
position:relative;
width:400px; /* Set your image width */
height:300px; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
Función
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
Llamamos a la función:
setInterval('swapImages()', 5000);
