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