1

我正在为图像滑块使用 jQuery Cycle 插件。我正在寻找的是这样的：

image1.jpg >> 淡出 >> 按住空白帧一秒钟 >> 淡入 image2.jpg >> 重复

如何控制下一个淡入淡出动画开始之前的延迟，或 2 次幻灯片转换之间的间隔？

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

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

我已经尝试将 sync: 0 转为停止 2 张幻灯片之间的同时淡入淡出过渡，但不是我想要的。

任何建议将不胜感激，谢谢。

4

2 回答 2

3

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

有关比下面更完整的示例，请参阅：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 毫秒。

于 2011-05-23T01:01:44.073 回答
0

一种方法是在每张图片后插入一张空白幻灯片。然后，您可以使用 timeoutFn 选项根据幻灯片是图像还是空白幻灯片来提供不同的超时值。

这是一个示例，其中图像显示 5 秒，空白幻灯片显示 2 秒：

http://jsfiddle.net/7jJe3/

<div id="slideshow">
    <img src="image1.jpg" />
    <span></span>
    <img src="image2.jpg" />
    <span></span>
    <img src="image3.jpg" />
    <span></span>
</div>

function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
    var imgtime = 5000;
    var blanktime = 2000;
    if ($(currSlideElement).is('img'))
        return imgtime;
    return blanktime;
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fade',
        speed: 400,
        timeoutFn: timeoutfn
    });
});
于 2011-05-21T09:11:16.453 回答