1 Dernière modification par estim (22-04-2016 21:33:31)

Sujet : Slideshow Simple

Bonjour à tous, j'espere que mon probleme vas vous sembler simple ^^

j'essai de réaliser de moi même un slideshow  infinie à 4 image avec deux bouton "suivant" et "précédent"


Mon probleme ? j'arrive trés bien à faire suivant mais quand je fais précédent le slide show se déplace donc vers la droite ce qui m'affiche un vide noir avant de le remplir à la fin de l’animation avec la dernier image. Donc la finalité de l'annimation est bonne ( 1234 --> 4123 --> 3412 etc mais le déroulement de l'annimation n'est pas bon)


C'est pas trés facile a expliquer comme ca ^^
http://www.sendbox.fr/5ce34cfb510c0b2f/Test.7z
Code :

$("#next").click(imageSuivante);
$("#before").click(imagePrecedente);

function imagePrecedente(){
    
    $("#rail").animate(
        {"margin-left" : "+400px" }
         , 3000, changeDerniereimage);
}

function changeDerniereimage(){
    //Remettre le margin-left à 0
    $("#rail").css("margin-left","0px");
    //On déplace apres la derniere image la premiere
    $("#slideshow img:first").before( $("#slideshow img:last") );
}

function imageSuivante(){
    
    $("#rail").animate(
        {"margin-left" : "-400px" }
         , 3000, changePremiereImage);     
}

function changePremiereImage(){
    //Remettre le margin-left à 0
    $("#rail").css("margin-left","0px");
    //On déplace apres la derniere image la premiere
    $("#slideshow img:last").after( $("#slideshow img:first") );
}