jquery diapositive photo

Question

J'ai une image, quand je passe la souris sur ce que je suis en mesure de voir les flèches gauche et droite ... quand je clique sur une flèche je change la attr source de l'image en utilisant jquery ... donc je suis réussi à changer les images sur les flèches .. cliquant ce que je veux, comment puis-je obtenir le diaporama se sentir ... pat d'animation où la glisse image actuelle à droite et une nouvelle glisse image de gauche lorsque la flèche gauche est cliqué ... 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, je voudrais avoir deux blocs, l'un pour l'ancienne image et un pour la nouvelle (à la fois avec trop-plein caché).

positions de départ:

  old - normal
  new - right margin = width of image

tick d'animation par exemple tous les 0,05 secondes

  old - left margin+1
  new right margin-1

Jusqu'à ce que l'ancien 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

est une œuvre d'animation personnalisée fait s'il vous plaît trouver le violon

    $('.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');
});