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

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

1 个答案: