jquery photo slide

Question

J'ai une image, quand je passe dessus je peux voir les flèches gauche et droite ... quand je clique sur une flèche je change la source attr de l'image en utilisant jquery ... donc je J'ai réussi à changer les images en cliquant sur les flèches .. ce que je veux est, comment puis-je obtenir le diaporama se sentir ... l'animation pat où l'image actuelle glisse à droite et une nouvelle image glisse de gauche lorsque la flèche gauche est cliquée ... s'il vous plaît me aider ... Je ne veux pas utiliser les plugins déjà existants ... Merci à l'avance ...

Answer 1

Pour ce faire, j'aurais deux blocs, un pour l'ancienne image et un pour la nouvelle (les deux avec overflow-hidden).

Les positions de départ:

 
    old - normal 
    new - right margin = width of image 

Animation tick par exemple toutes les 0,05 secondes

 
    old - left margin+1 
    new right margin-1 

Jusqu'à ce que le vieux a glissé et la nouvelle a glissé dans.

Answer 2

Je suggère que vous utilisez les fonctions animés de JQuery. Regardez http://api.jquery.com/animate/ pour plus d'informations.

Answer 3

ceci est un travail d'animation personnalisée fait s'il vous plaît trouver le fiddle

$('.arrowRight').on('click', function(e) { 
    var currLandscape = $(this).siblings(".currImg"); 
    var prevLandscape = currLandscape.prevAll(".hiddenImg").first(); 

    var currDesc= $(".currDesc"); 
    var prevDesc= currDesc.prevAll(".hiddenDesc").first(); 

    if (prevLandscape.length == 0) { 
     prevLandscape = currLandscape.siblings('.hiddenImg').last(); 
    } 
    if (prevDesc.length == 0) { 
     prevDesc= currDesc.siblings('.hiddenDesc').last(); 
    } 

    prevLandscape.show("slide", { direction: "right" }, 400, function() { 
     currLandscape.hide("slide"); 
    }); 

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc'); 
    prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc'); 

    currLandscape.removeClass('currImg').addClass('hiddenImg'); 
    prevLandscape.removeClass('hiddenImg').addClass('currImg'); 
}); 


$('.arrowLeft').on('click',function(e) { 
    var currLandscape = $(this).siblings(".currImg"); 
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first(); 

    var currDesc= $(".currDesc"); 
    var nextDesc= currDesc.nextAll(".hiddenDesc").first(); 

    if (nextLandscape.length == 0) { 
     nextLandscape = currLandscape.siblings('.hiddenImg').first(); 
    } 
    if (nextDesc.length == 0) { 
     nextDesc= currDesc.siblings('.hiddenDesc').first(); 
    } 

    nextLandscape.show("slide", { direction: "left" }, 400, function() { 
     currLandscape.hide("slide"); 
    }); 

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc'); 
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc'); 

    currLandscape.removeClass('currImg').addClass('hiddenImg'); 
    nextLandscape.removeClass('hiddenImg').addClass('currImg'); 
});