Javascript Girl
  1. Javascript Girl
  3. Jquery glisse d'avant en arrière ou glisse
Intereting Posts
Multitouch touchEvents ne sont pas déclenchés comme ils le devraient sur Safari Mobile Safari Date Javascript () NaN Issue (aaaa-MM-jj HH: mm: ss) Définition de l'en-tête de l'autorisation dans XMLHttpRequest changes HTTP verbe Impossible d'obtenir une propriété de référence non définie ou nulle – application Windows 8 JS / CSS Comment ajouter ng-include callback à plusieurs directives ng-include dans js angulaires Fermez automatiquement toutes les autres étiquettes <details> après avoir ouvert une étiquette <details> spécifique Comment chargez-vous un fichier Javascript dans la fonction de succès pour $ .ajax ()? Qu'est-ce qu'un script-Tag avec le contenu src AND signifie? Comment formater un numéro de téléphone avec jQuery Comment créer des points d'arrêt dans IE Developer Tools pour le code qui s'exécute pendant le chargement? JQuery.parseJSON vs JSON.parse Pourquoi JSON.stringifie-t-il pas de sérialiser des propriétés non énumérées? Comment «afficher» une variable javascript dans une division html? Chargement bloqué contenu actif mixte Uncaught TypeError: Impossible de définir la propriété 'src' de null

Jquery glisse d'avant en arrière ou glisse

S'il vous plaît, j'ai besoin d'aide pour glisser des images en utilisant jquery d'avant en arrière, ou tout simplement pour contourner. En ce moment, il glisse vers le dernier élément et se précipite vers le premier div et recommence, pas beau du tout, je sais que je devrais rappeler une fonction pour le faire, mais je me fais mal. Merci d'avance, c'est mon code jquery ci-dessous 

$(document).ready(function() { var currentPosition = 0; var slideWidth = 190; var slides = $('.slider_move'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 5000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({'marginLeft' : slideWidth*(-currentPosition)}); } });​

Au lieu de: 

 if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; }

Vous devez déplacer la première diapositive jusqu'à la fin (et ajuster la position du conteneur en même temps): 

 if (currentPosition > 0) { $('#slidesHolder').css('marginLeft',0) .children().first().appendTo('#slidesHolder'); } else { currentPosition += 1; }

http://jsfiddle.net/mblase75/qatry/

Ou, pour optimiser tout un peu, vous pouvez éliminer la variable currentPosition et la sous-fonction moveSlide , et utilisez simplement un rappel dans la méthode .animate : 

 function changePosition() { $('#slidesHolder').animate({ 'marginLeft': 0-slideWidth }, function() { $('#slidesHolder').css('marginLeft', 0) .children().first().appendTo('#slidesHolder'); }); }

http://jsfiddle.net/mblase75/8vaCg/