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); 
    } 
});