每个幻灯片的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 选项 您可以使用这样的使用：

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

但是，您可以使用一个 数据属性, ，这样的事情：

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

那么您的代码更简单：

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