jQuery循环插件，每张幻灯片具有不同的超时值

问题描述：

我正在尝试使用jQuery循环插件来循环不同的引号.我希望显示不同时间的报价，具体取决于报价的长度.为此，我使内容管理系统将以秒为单位的秒数输出为类名称，例如dur13，将持续13秒.

I'm trying to use the jQuery cycle plugin to cycle round different quotes. I would like to have the quotes displayed for different amount of time depending on the length of the quote. To achieve this I get the content mangagement system to output the amount of seconds as a class name such as dur13 would be for 13 seconds.

这是我的无效尝试:

$('.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');
}

循环可能吗?如果没有的话，还有另一个插件可以工作吗?我真的不需要花哨的效果，只要淡入淡出就足够了.

Is this possible with cycle? If not is there another plugin that would work? I don't really need fancy effects, just fade in fade out would be enough.

非常感谢

答

有一个 timeoutFn选项，您可以这样使用:

There's a timeoutFn option you can use, like this:

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

但是，您可以使用数据属性代替类，例如这个:

However, instead of a class you can use a data attribute, something like this:

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

然后您的代码会更简单:

Then your code is a bit simpler:

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

jQuery循环插件，每张幻灯片具有不同的超时值

相关推荐