jQuery循环插件 - 暂停/恢复奇怪的行为

问题描述：

我有一个幻灯片演示与真棒循环插件运行，当你点击显示按钮时，我在页面上显示一个隐藏层，并发送一个'暂停'命令来循环。我有两个问题：jQuery循环插件 - 暂停/恢复奇怪的行为

当接收到暂停命令，立即周期翻转回第一个幻灯片序列（为什么？）中，在此之前不打我的/回调之后。
关闭图层后，我发送一个'resume'命令来循环。幻灯片放映恢复（从第一张幻灯片中暂停它），但现在循环根本不会在回调之前/之后调用我，即使幻灯片播放进行中也是如此。

所以我想我的问题是：我该如何正确地暂停/恢复幻灯片，以便这些奇怪的行为不会发生？（只是要完全清楚，避免任何混淆，这不是关于“暂停悬停”功能，这实际上工作正常。:-)

这是我的循环（）初始化和我的回调功能。（为什么我手动跟踪nextSlide，你问？因为当前幻灯片内置值不会得到正确的更新前/后回调。）

$(document).ready(function() { 
    $('#slideshow').cycle({ 
     fx: 'fade',  // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     timeout:  4000, // milliseconds between slide transitions (0 to disable auto advance) 
     speed:   1000, // speed of the transition (any valid fx speed value) 
     pause:   1,  // true to enable "pause on hover" 
     delay:   0,  // additional delay (in ms) for first transition (hint: can be negative) 
     slideExpr:  'img', // expression for selecting slides (if something other than all children is required) 
     before:  moveArrow, // function to call when moving to next slide 
     after:  upd, // function to call when moving to next slide 
     fastOnEvent: 'fast', 
    }); 
    }); 

    var nextSlide = 0; 

    function upd(a, b, c) { 
    nextSlide = nextSlide + 1;  // track which slide we're on 
    c = $('#slideshow img').length; 
    if(nextSlide > (c - 1)) nextSlide = 0; // wrap back to 1st 
    } 

    // move indicator showing which slide we're on 
    function moveArrow(a, b, c) { 
    $('#slide-indicator').attr('class', 'c'+nextSlide); 

    $(".clickmap").hide();   // hide other clickmaps 
    $(".clickmap.c"+nextSlide).show(); // show map for this slide 

    return true; 
    }

感谢您的这 - 什么想法 -

最好，埃里克

我也有这个问题。我希望有人有答案。 – blackrobot 2010-07-20 15:27:38

我想出了一种可能适用于您的解决方法 - 但需要帮助让解决方法发挥正确。呃:-)你可以看到我的问题在这里：http://stackoverflow.com/questions/3295185/jquery-remove-function-attached-to-div – Eric 2010-07-20 23:25:21

我越来越近 - 我认为问题的一部分是Mac Firefox的一些问题。我在这里用非常简单的代码设置了一个文本页面：http://themepark.com/eric/ – Eric 2010-07-23 04:07:10

答

你没有显示发送暂停指令代码。有些东西肯定是错误的，因为暂停不会将幻灯片重置为第一张幻灯片。

另外，您不需要自己跟踪幻灯片索引。回调之前/之后的第三个参数是具有幻灯片内部状态的选项对象。在那个对象上，你会发现'currSlide'和'slideCount'属性等等。

感谢提示：currSlide。之前我曾经使用过这个功能，并且得到了一些奇怪的结果，但是我再次尝试了一次，现在没问题，所以我之前可能犯了一个错误。此外，我做了一堆更多的测试，并看到发生了什么事情的一部分。当调用cycle（'pause'）时，#slideshow div中的所有元素都设置为“top：0; left：0; position：absolute; display：none; opacity：0”，每个元素的z-index为重置也是如此。（续） – Eric 2010-07-23 03:10:17

这导致了我所看到的一些行为：我为幻灯片放映层叠了几个图层，这样就解释了第一张幻灯片再次出现。发生什么事情的一部分是，在我的#slideshow div中，我有其他div（这不是幻灯片的一部分，但需要在那里），所以当我设置cycle（）时，我告诉它只拾取#slideshow div内的IMG元素。但我认为在'暂停'时忽略了这一点，只是重新设置了所有内容。 – Eric 2010-07-23 03:10:53

这里有几个不同的事情发生，这个主题变得有点疯狂，但是FWIW我发现了一个Mac Firefox的问题，这可能有助于解释至少一些怪异。从Mac Firefox尝试http://themepark.com/eric ... – Eric 2010-07-23 04:10:36

答

我有同样的问题，暂停和恢复不起作用。看来我已经安装了lite版本，它的完整/完整版本正在运行。

答

我知道这是一个老问题，但我只是有同样的问题。我解决这个问题的方法是简单地创建自己的函数来暂停和恢复使用JQuery悬停事件的幻灯片。

正如Eric在一些评论中指出的那样，一个相关的问题是，插件的暂停选项只允许悬停在IMG元素上以暂停幻灯片显示，所以如果你有任何东西在你的图像上，如寻呼机或任何装饰元素，那么你是骨架。

于是，我把我的装饰元素，横幅（我称之为“#banner”）和寻呼机所有到一个名为“＃旗帜容器” DIV，然后应用此代码，以解决我的问题：

$('div#banner-container').hover(function(){ 
    if(!$(this).hasClass('paused')){ 
     $(this).addClass("paused"); 
     $('div#banner').cycle("pause") 
    } 
},function(){ 
    if($(this).hasClass('paused')){ 
     $(this).removeClass("paused"); 
     $('div#banner').cycle("resume") 
    } 
});

答

问题出现在JQuery Cycle Plugin版本中：“lite”版本忽略暂停/恢复命令。使用完整版本可以解决问题。

编辑：对不起，我错了：我试过两个版本，但使用完整版本有相同的问题。

jQuery循环插件 - 暂停/恢复奇怪的行为

相关推荐