- Erreur
Tutoriaux
Administrateur
Jui 15
|19:12
On voit régulièrement ce genre d'effet dans les galeries d'image web. Voyons donc dans cet article comment réaliser le remplacement d'une image par une autre dans à chaque intervalle de temps X (remplacer image1.jpg par image2.jpg chaque 5 secondes). En javascript, lorsqu'on parle de "chaque seconde" ou "d'intervalle ", on pense déjà à la fonction; setInterval().
Avant de voir le code JavaScript, imaginons donc un peu notre gallerie d'image html;
<div id="maGalerie"> <img src="/image1.jpg" class="active" /> <img src="/image2.jpg" /> <img src="/image3.jpg" /> </div>
Nous devons donc, cacher toutes les images sauf celle ayant la classe "active" et empiler chacune d'entre elles.
#maGalerie{
position:relative;
width:400px; /* Largeur de ma galerie */
height:300px; /* Hauteur de ma galerie */
}
#maGalerie img{
display:none;
position:absolute;
top:0;
left:0;
}
#maGalerie img.active{
display:block;
}
Voyons maintenant la partie qui nous intéresse, le code jQuery qui va générer l'animation de transition entre les images;
function swapImages(){
var $active = $('#maGalerie .active');
var $next = ($('#maGalerie .active').next().length > 0) ? $('#maGalerie .active').next() : $('#maGalerie img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
Ne reste plus qu'à lancer la fonction à chaque intervalle de temps.
// Lance la fonction swapImages chque 5 secondes
setInterval('swapImages()', 5000);
Envoyer par mail
Vu: 1585
Commentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Réseaux sociaux
