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