jQuery循环插件-幻灯片之间的延迟间隔问题

如何解决jQuery循环插件-幻灯片之间的延迟间隔问题

|| 我正在将jQuery Cycle Plugin用于图像滑块。我正在寻找的是这样的： image1.jpg >>淡出>>按住空白帧>>淡入image2.jpg >>重复 如何控制下一个淡入淡出动画开始之前的延迟或两次幻灯片过渡之间的间隔？ 我的意思是，当第一个幻灯片图像完全淡出时，我需要它暂停1或2秒钟，然后第二个图像才真正开始其淡入淡出动画。 **当我使用传呼机或下一个/上一个链接更改幻灯片时，我需要使它起作用。 我试过将同步：0停止在2张幻灯片之间同时进行的淡入淡出过渡，但并不是我想要的。 任何建议将不胜感激，谢谢。     

解决方法

您可以定义一个自定义过渡，使当前幻灯片淡出，等待，然后在下一张幻灯片中淡出。 有关比下面更完整的示例，请参见：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毫秒。     ,一种方法是在每个图像后插入空白幻灯片。然后，您可以使用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
    });
});