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 ...jquery photo slide
0
A
Répondre
2
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.
0
Je suggère que vous utilisez les fonctions animés de JQuery. Regardez http://api.jquery.com/animate/ pour plus d'informations.
0
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');
});
Questions connexes
- 1. jQuery Animation Slide Left
- 2. jquery show slide bug
- 3. jquery slide and timing
- 4. jquery image auto slide
- 5. Jquery UI Tabs - slide
- 6. effet Slide (jQuery)
- 7. l'image jquery slide
- 8. jQuery slide up the image?
- 9. slide image jquery rapide show
- 10. javascript slide jquery sur l'onglet
- 11. jQuery slideDown vs jQuery UI .show ('slide')
- 12. jQuery Slide dans la mauvaise position
- 13. jquery au prototype, ajax et slide
- 14. Plugin jQuery Cross Slide et Internet Explorer
- 15. Mise en œuvre jQuery Overlay/Slide Div!
- 16. javascript slide slick_accessible_slideshow
- 17. slide UISearchBar
- 18. asp.net et jQuery (jolie photo)
- 19. div effet slide
- 20. slide-in uitoolbar
- 21. iphone slide movement recognizer
- 22. slide div sur l'image
- 23. C# Dropdown Slide Form
- 24. jQuery question de débutant concernant slide up/down effet
- 25. JQuery UI .show ('slide') ne pas animer correctement
- 26. jQuery Slide Out; Le contenu disparaît pendant le glissement
- 27. Jquery - Comment vérifier: si .toggle ('slide') est prêt?
- 28. validate + listener + slide down panel
- 29. Cadres photo/photo
- 30. shape.Parent ne retourne pas Slide