plug-in de cycle jQuery avec différentes valeurs de délai d'attente pour chaque diapositive

Question

Je suis en train d'utiliser le plug-in du cycle jQuery pour différentes citations rondes du cycle. Je voudrais avoir les citations affichées pour différents laps de temps en fonction de la longueur de la citation. Pour ce faire, je reçois le système mangagement contenu à la sortie de la quantité de secondes comme un nom de classe telle que dur13 serait pendant 13 secondes.

Ceci est ma tentative de non-travail:

$('.featureFade').cycle({cycleTimeout: 10, after: onCycleAfter});

function onCycleAfter() { 
    $('.featureFade').cycle('pause');
    var duration = $(this).attr('class').substring($(this).attr('class').indexOf('dur')+3)
    setTimeout(oncycleEnd, duration * 1000); 
}
function oncycleEnd() { 
    $('.featureFade').cycle('resume');
}

Est-ce possible avec le cycle? Dans le cas contraire est-il un autre plug-in qui fonctionnerait? Je ne les effets de fantaisie vraiment pas besoin, juste fade in out fondu serait suffisant.

Merci beaucoup

Answer 1

Il y a un timeoutFn l'option vous pouvez utiliser, comme ceci:

$('.featureFade').cycle({
  timeoutFn: function(currElement, nextElement, opts, isForward) { 
    var duration = $(currElement).attr('class').substring($(currElement).attr('class').indexOf('dur')+3)
    return duration * 1000;
  }
});

Cependant, au lieu d'une classe, vous pouvez utiliser un attribut de données , quelque chose comme ceci:

<img data-duration="2000" src="..." />

Ensuite, votre code est un peu plus simple:

$('.featureFade').cycle({
  timeoutFn: function(currElement, nextElement, opts, isForward) { 
    return parseInt($(currElement).attr('data-duration'), 10);
  }
});