jQuery循环插件-幻灯片之间的延迟间隔问题 [英] JQuery Cycle Plugin - Delay Interval Between Slides Question

问题描述

我正在将jQuery Cycle Plugin用于图像滑块。我正在寻找的是这样的东西：

I'm using jQuery Cycle Plugin for an image slider. What I'm looking for is something like this:

image1.jpg >>淡出>>按住空白帧>>淡出image2.jpg >>重复

image1.jpg >> fadeout >> hold on the blank frame for a second >> fadein image2.jpg >> repeat

如何控制下一个淡入淡出动画开始之前的延迟或两次幻灯片过渡之间的间隔？

How can I control the delay before the next fade animation starts, or the interval between 2 slide transitions?

我的意思是，当第一张幻灯片图像完全淡出时，我需要先暂停一秒或2秒钟，然后第二张图像才开始其淡入淡出动画。

I mean when the first slide image completely fades out, I need it to pause for 1 or 2 seconds before the second image actually begins its fadein animation.

**当我使用传呼机或下一个/上一个链接更改幻灯片时，需要使它正常工作。

** I need to get this to work during when I'm changing slides with the pager or next/prev links.

我尝试过将同步：0停止同时衰落在2张幻灯片之间转换，但不是我想要的。

I've tried turning sync: 0 to stop simultaneous fading transition between 2 slides but not quite what I was looking for.

任何建议都会受到感谢。

Any advice will be appreciated, thanks.

推荐答案

您可以定义一个自定义过渡，使当前幻灯片淡出，等待，然后在下一张幻灯片中淡入。

You can define a custom transition which fades out the current slide, waits, and then fades in the next slide.

比下面更完整的示例，请参见： http://jsfiddle.net/QGRv9/1/

For a more complete example than below, see: http://jsfiddle.net/QGRv9/1/

$.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
    opts.fxFn = function(curr, next, opts, after) {
        $(curr).fadeOut(opts.fadeSpeed, function() {
            $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                after();              
            });
        });
    };
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fadeOutWaitFadeIn',
        fadeSpeed: 500,
        delayBetweenFades: 2000,
        //The timeout value includes the fade speed (twice) and delay between fades.
        //e.g. For a 3000 ms timeout, use 3000 + 500 * 2 + 2000 = 6000.
        timeout: 6000
    });
});

请注意，我在这里可能做错了什么。超时不必包含其他值。还有一个小问题：第一张幻灯片显示的时间是6000毫秒而不是3000毫秒。

Note that I'm probably doing something wrong here. The timeout shouldn't have to include the other values. There's also one small issue: The first slide gets shown for 6000ms instead of 3000ms.

这篇关于jQuery循环插件-幻灯片之间的延迟间隔问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！