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

发布于 2024-09-06 10:14:21 字数 550 浏览 8 评论 0原文

我正在尝试使用 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');
}

这可以用循环实现吗？如果没有的话还有其他插件可以用吗？我真的不需要花哨的效果，淡入淡出就足够了。

非常感谢

原文

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.

This is my non-working attempt:

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

Many thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

濫情▎り 2024-09-13 10:14:21

您可以使用 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);
  }
});

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

回复收藏 0 原文

~没有更多了~