jQuery循環插件爲每個幻燈片使用不同的超時值

Question

我試圖使用jQuery循環插件來循環使用不同的引號。我希望根據報價的長度顯示不同時間的報價。爲了達到這個目的，我得到內容管理系統輸出秒類，比如dur13這樣的類名需要13秒。

這是我的非工作的嘗試：

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

這是可能的循環？如果不是有另一個插件可以工作？我不需要花哨的效果，淡入淡出就足夠了。

非常感謝

Answer 1

有一個timeoutFn option就可以使用，這樣的：

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

然而，而不是一類，你可以使用一個data attribute，是這樣的：

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

那麼你的代碼有點簡單：

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