Slideshow cyclique simple avec JQuery

Edit : Maintenant entièrement compatible avec IE6

Slideshow simple, qui se base sur l’opacité et les z-index, pour avoir un effet de « fade » cyclique sur les images (NB : fonctionne sous IE6, mais sans le fade).

Vous pouvez voir la démo ici.

Inclure :

HTML

Code HTML on ne peut plus simple :

  • Un div ayant une classe slideshow et l’id de votre choix
  • Les images (de mêmes dimensions), avec une classe slideshow-item

CSS

.slideshow{
	position:relative;
}
.slideshow .slideshow-item
{
	position:absolute;
	top:0;
	left:0;
}
#monslideshow{
	width:800px; /* à modifier selon la largeur de vos images */
	height:600px; /* à modifier selon la hauteur de vos images */
	background:url(load.gif) no-repeat 390px 290px; /* pour afficher un logo de chargement en attendant que les images soient chargées */
}

L’appel JS

On se sert du préload d’images pour charger nos images, on affiche le slideshow une fois que tout est chargé.

$(document).ready(function(){
	$('.slideshow-item').hide();
});
$(window).load(function(){
	slideshow('monslideshow',1000,1000);
});

La fonction slideshow prend en paramètres :

  • L’id du slideshow
  • Le nombre de milliseconde pour la transition entre 2 images
  • Le nombre de milliseconde où reste affiché chaque image