Jquery循环在页面上的多个元素上有延迟？

发布于 2024-10-17 11:18:50 字数 853 浏览 6 评论 0原文

我已经通过 stackoverflow （和 Google）进行了搜索，但我无法找到解决 jquery 循环困境的答案。

我在一个页面上有 3 个 div（divA、divB、divC），每个 div 中都有多个图像，以便与 jQuery Cycle 插件一起使用。我想要的结果是暂停 4 秒，然后第一个图像将循环（800 毫秒的更改时间），然后是第二个图像，然后是第三个图像。此时，一切都会再暂停四秒，然后又依次变化。

这就是目标。我尝试将它们全部设置为超时并延迟启动它们，但是浏览器中的任何小问题都会导致它们很容易失去同步。到目前为止，我最接近的是这样做：

$.fn.cycle.defaults.speed   = 800;
$.fn.cycle.defaults.timeout = 0;
function runA() { 
 $('#divA').cycle({timeout: 4000,after:runB});
}
function runB() { 
 $('#divB').cycle('next');
}

对于前两个 div 来说，这绝对有效，并且保持同步。但此时我不知道如何等待 divB 上的循环完成，然后手动循环 divC。循环插件似乎不允许我调用字符串“next”并在选项中设置延迟。

我已经尝试过

$('#divB').cycle('next').delay(800).siblings('#divC').cycle('next');

，但 divB 和 divC 同时触发循环。我也尝试了空闲插件，但 divB 和 divC 上的循环仍然同时触发。

对此的任何帮助将不胜感激。如果这个问题之前已经在某个地方得到过回答，请给我指出那个方向。我一直没能找到它。

原文

I have searched through stackoverflow (and Google) and I cannot seen to find an answer to my dilemma with jquery cycle.

I have 3 divs on a page (divA, divB, divC) each of which has multiple images in them, for use with the jQuery Cycle plugin. My desired result would be for a pause of 4 seconds, then the first image would cycle (800ms change time), followed by the second, followed by the third. At this point, everything would pause for 4 more seconds, then they would sequentially change again.

That's the goal. I tried putting them all on timeouts with a delay to start them, but any hiccup in the browser would cause them to easily get out of sync. The closest I have come so far is to do:

$.fn.cycle.defaults.speed   = 800;
$.fn.cycle.defaults.timeout = 0;
function runA() { 
 $('#divA').cycle({timeout: 4000,after:runB});
}
function runB() { 
 $('#divB').cycle('next');
}

And that definitely works, and stays in sync, for the first two divs. But at this point I'm at a loss as to how to both wait for the cycle on divB to finish and then manually cycle divC. It seems that the cycle plugin does not allow me to call both the string 'next' and set a delay in the options.

I have tried

$('#divB').cycle('next').delay(800).siblings('#divC').cycle('next');

but both divB and divC fire the cycle at the same time. I also tried the idle plugin, but still the cycle on divB and divC fires at the same time.

Any help on this would be greatly appreciated. And if this has been previously answered somewhere, please point me in that direction. I have not been able to find it.

分享到QQ

分享到微博