Une situation difficile pour le diaporama jQuery

Question

Je dois développer un diaporama (pas un existant) avec jQuery. J'ai été capable de changer d'image avec une fonction que j'ai créée nommée changePic (prend un lien d'image). Il intègre l'animation de fondu de la bibliothèque jQuery.

Pour le diaporama, j'essaie d'utiliser une boucle while. Ca fonctionne, sauf que ça n'attend pas que l'animation se termine.

Comment puis-je, a) attendre que l'animation se termine, b) retarder l'image changeante afin qu'elle affiche l'image pendant quelques secondes?

Également essayé Settimeout, et cela ne fonctionne pas.

Edit:

l'image Fondamentalement changer est comme ceci:

function changePic(imglink){ 
    var imgnode = document.getElementById("galleryimg"); 
    $(imgnode).fadeTo(500, 0, function(){ 
     $(imgnode).attr("src", imglink); 
     $(imgnode).fadeTo(1000, 1); 
    }) 
} 

et le code de diaporama est comme ça, mais évidemment il ne faut pas.

function slideshow(gallerylinks){ 
    var i=0; 
    while (i<gallerylinks.length){ 
     changePic(gallerylinks[i]); 
     i++; 
    } 
} 

Answer 1

Vous pouvez toujours essayer d'amerrissage la boucle while, et aller avec une fonction récursive perpétuellement ...

sur le .animate, vous pouvez ajouter une fonction de temporisation (quel que soit l'intervalle) qui appelle la fonction changePic. Comme je n'ai aucune idée de ce à quoi ressemble votre code, je vais vous donner un aperçu générique.

/* array of imgUrls */ 

var imgUrls = new Array(); //populate it however 
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay) 
{ 
    $('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){ 
     $('#slideHolder').attr('src', imgUrls[slideToShowIndex]); 
     $('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() { 
      setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay}); 
     }); 
    }}); 
} 

$(document).ready(function() { 
changePic(0, 5000, 5000, 10000); 
}); 

Cela devrait (en théorie) effacer l'image dehors, échanger avec le nouveau, et se fanent dans (les deux de prendre 5 secondes), puis en ajoutant un délai pour appeler lui-même avec l'index diapositive suivante en 10 secondes.

Ce n'est en aucun cas parfait, mais esquisse l'idée générale. Comme nous n'avons aucune idée de ce à quoi ressemble votre code, je ne peux que supposer que votre setTimeout était au mauvais endroit. Le faire comme ceci s'assurera que l'animation est finie avant que le délai d'expiration ne soit défini. Cela garantit que la diapositive ne changera qu'après la modification de l'animation.

Bien sûr, vous pouvez toujours utiliser une combinaison du sélecteur ': not (: animated)' et un setInterval pour obtenir le même résultat.

EDIT: fait un léger changement pour empiler correctement les animations. La thoery derrière cela fonctionne encore avec l'ajout de code OPs.

Answer 2

Vous pourriez avoir fourni plus de détails ou exemple de code, mais un coup d'oeil à stop() et delay() fonctions.