JS : Slider d'images en fondu

1 mars 2011
web js jquery

Comme précédemment, on veut afficher des images les unes à la suite des autres avec un clic souris, mais cette fois la transition se fait avec un fondu enchaîné et un code très réduit (merci jQuery).

Dans le code qui suit, la variable Container contient l'élément jQuery correspondant au DIV encapsulant les images :

var ImgIndex = MaxImgIndex = 0
Container.find("img").each(function()   {
    $(this).css({"position":"absolute"}).fadeTo(1, 0.001).css("display", "none")
    MaxImgIndex++
    $(this).click(function()    {
        Container.find("img:nth-child("+ImgIndex+")").fadeTo(1000, 0.01, function() {
                $(this).css("display", "none")
        })
        ImgIndex = (ImgIndex == MaxImgIndex ? 1 : ImgIndex+1)
        Container.find("img:nth-child("+ImgIndex+")").css("display", "inline").fadeTo(1000, 1)
    })
})
//On affiche la première image...
Container.find("img:nth-child(1)").trigger("click")
Accueil