jQuery Zyklus Plugin mit unterschiedlichen Zeitüberschreitungswerte für jede Folie

Question

Ich versuche, den jQuery-Zyklus Plugin Zyklus Runde verschiedene Angebote zu nutzen. Ich mag die Angebote für unterschiedliche Menge an Zeit auf der Länge des Zitats abhängig angezeigt haben. Um dies zu erreichen ich den Inhalt Mangagement-System zur Ausgabe der Anzahl der Sekunden als Klassennamen erhalten wie dur13 würde 13 Sekunden lang sein.

Das ist mein nicht arbeit Versuch:

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

Ist das möglich mit Zyklus? Wenn nicht, ist es ein weiteres Plugin, das funktionieren würde? Ich habe nicht wirklich Lust Effekte benötigen, nur Einblenden Ausblenden genug sein würde.

Vielen Dank

Answer 1

Es gibt eine timeoutFn Option Sie verwenden können, wie folgt aus:

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

Doch statt einer Klasse können Sie verwenden Datenattribut , so etwas wie folgt aus:

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

Dann wird Ihr Code ist ein bisschen einfacher:

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