每张幻灯片具有不同超时值的 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);
  }
});