Pour commencer, notre principal objectif doit être la tenue du balisage html aussi propres que possible: jQuery va gérer une structure seulement de cette facon :


< div id=\"slideshow\">
    < img src=\"img/img1.jpg\" alt=\"\" class=\"active\" />
    < img src=\"img/img2.jpg\" alt=\"\" />
    < img src=\"img/img3.jpg\" alt=\"\" />
< /div>

Maintenant, nous allons utiliser les CSS pour positionner les images sur le dessus de l\'autre et mettre l\'image active au niveau supérieur avec la propriété z-index : 


#slideshow {

    position:relative;

    height:350px;

}

#slideshow IMG {

    position:absolute;

    top:0;

    left:0;

    z-index:8;

}

#slideshow IMG.active {

    z-index:10;

}

#slideshow IMG.last-active {

    z-index:9;

}



Grâce à un positionnement absolu, nous avons besoin de définir la hauteur du DIV \"slideshow\".  Aussi, notez que nous avons défini trois différents z-index-nous manipuler prochainement l\'utilisation de jQuery. Pour l\'animation \"slidewhow\", nous allons basculer entre chaque photo à un taux fixe. Commençons donc par écrire une fonction qui apporte une nouvelle photo sur le dessus de la dernière image active:

function slideSwitch() {

    var $active = $(\'#slideshow IMG.active\');

    var $next = $active.next();    



    $next.addClass(\'active\');



    $active.removeClass(\'active\');

}



$(function() {

    setInterval( \"slideSwitch()\", 5000 );

});



Nous mettons un intervalle de JavaScript pour appeler slideSwitch () toutes les 5 secondes. Puis slideSwitch () applique la classe CSS «actif» pour mettre l\'image à côté du haut de la pile. Comme nous allons sélectionner les images plus d\'une fois dans slideSwitch (), nous définissons les variables $ $ active et suivante Ensuite, nous devrions intégrer un fondu animation. Pour une galerie de ce genre, fade in et fade out sont identiques : 


function slideSwitch() {

    var $active = $(\'#slideshow IMG.active\');

    var $next = $active.next();



    $active.addClass(\'last-active\');



    $next.css({opacity: 0.0})

        .addClass(\'active\')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass(\'active last-active\');

        });

}



$(function() {

    setInterval( \"slideSwitch()\", 5000 );

});

Nous commençons par l\'application de la classe «last-active», que nous avons défini plus tôt. Depuis \".last-active\" jusque à \".active\" dans la feuille de style, le z-index de 9 a la priorité, et l\'image du haut retombe un niveau. Ensuite, nous avons mis l\'opacité de la nouvelle image à 0 de sorte que nous pouvons avoir un fondu en utilisant la fonction animate(). Enfin, nous attachons \"une fonction de rappel\" pour supprimer les classes z-index de l\'image précédente quand animate() se termine. Bien que notre diaporama fonctionne bien, nous devrions rendre plus robuste par la construction dans certaines variables par défaut. D\'abord, définir une image par défaut \'active\'.


function slideSwitch() {

    var $active = $(\'#slideshow IMG.active\');



    if ( $active.length == 0 ) $active = $(\'#slideshow IMG:last\');



    var $next =  $active.next().length ? $active.next()

        : $(\'#slideshow IMG:first\');



    $active.addClass(\'last-active\');



    $next.css({opacity: 0.0})

        .addClass(\'active\')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass(\'active last-active\');

        });

}



$(function() {

    setInterval( \"slideSwitch()\", 5000 );

});





Nous définissons d\'abord une image par défaut pour la variable $ active, elle doit être la dernière image sur la pile. Car dans le positionnement absolu, la dernière image apparaît sur le dessus, et nous devons commencer avec lui si nous voulons éviter tout scintillement. Pour la boucle, il est assez simple: tout ce que nous avons à faire est le point de la variable $ en regard de la première image. Si vous voulez améliorer cette fonction, essayez de régler la vitesse d\'animation avec une variable. En outre, ce diaporama est facilement converti à l\'appui < DIV> au lieu des < IMG> . Pour les interessés je mettrais prochainement un zip à dispo avec un exemple simplifié du script actuelement utiliser dans la partie Equipe