jQuery Cycle插件 – 暂停/恢复奇怪的行为

我有一个幻灯片运行与令人敬畏的循环插件，当你点击节目中的一个按钮，我在页面上显示一个隐藏的图层，并发送’暂停’命令循环。 我有两个问题：

1. 当收到暂停命令时，循环立即翻转回序列中的第一张幻灯片（为什么??），并且没有点击我之前/之后的回调。

2. 关闭图层后，我发送’resume’命令进行循环。 幻灯片继续播放（从第一张幻灯片开始，暂停离开它），但现在循环根本不会调用我之前/之后的回调，即使幻灯片显示进展。

所以我想我的问题是：如何才能正确暂停/恢复幻灯片放映，以免出现这些奇怪的行为？ （并且为了完全清楚并避免任何混淆，这不是关于“暂停hover”function，这实际上对我来说工作正常。:-)

这是我的cycle（）init和我的回调函数。 （为什么我要手动跟踪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; } 

感谢您对此的任何想法 –

最好，埃里克

Answer 1

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

Answer 2

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

此外，您无需自己跟踪幻灯片索引。 回调前/后的第三个参数是一个具有幻灯片显示内部状态的选项对象。 在该对象上，您将找到’currSlide’和’slideCount’属性等等。

Answer 3

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

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

所以，我将我的装饰元素，横幅（我称之为“#banner”）和寻呼机全部放入一个名为“＃banner-container”的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") } }); 

Answer 4

问题出在JQuery Cycle Plugin版本中：“lite”版本忽略了pause / resume命令。 使用完整版可以解决问题。

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