如何在滚动时为页面上的多个缩略图集实现 jQuery 图像循环循环？

Posted 2023-02-24

【中文标题】如何在滚动时为页面上的多个缩略图集实现 jQuery 图像循环循环？

【英文标题】：How do I implement jQuery image cycle loops on rollover for multiple thumbnail sets on a page?

【发布时间】：2012-07-01 09:53:40

【问题描述】：

这是我目前拥有的 javascript

<script type="text/javascript">
$(function() 
    $('.slideshow').hover(
        function()  $('.slides').cycle('resume'); ,
        function()  $('.slides').cycle('pause'); 
    );

    $('.slides').cycle(
        fx:     'fade',
        speed:   .3,
        timeout: 280,
        next:   '#next',
        prev:   '#prev'
    ).cycle("pause");
);
</script>

有效；但问题是它适用于页面上的所有缩略图集，每当我将鼠标悬停在一组图像上时，其他所有图像集也会循环。

我确实看到这是因为我以类为目标，但我的 jQuery 经验非常有限，所以我不知道如何只针对每个类的单个实例而不影响其他类，我无法进入和硬编码 id，因为我的缩略图和每页上的视频数量是通过这个 Django 模板动态确定的。

http://pastebin.com/nf42bSAx

我将非常感谢任何帮助，因为这对我的项目（开源媒体平台）至关重要。

谢谢。

【参考方案1】：

你应该只在当前幻灯片中的幻灯片上调用循环，所以调用类似：

$(".slideshow").each(function() 
    $(this).find(".slides").cycle(
        fx:     'fade',
        speed:   .3,
        timeout: 280,
        next:   '#next',
        prev:   '#prev'
    ).cycle("pause").end().hover(
        function()  $(this).find('.slides').cycle('resume'); ,
        function()  $(this).find('.slides').cycle('pause'); 
    );
);

请注意，我在今天之前没有使用过（甚至听说过）这个功能，但从逻辑上讲，这应该可以满足您的需求。

【讨论】：

感谢您帮助我，非常感谢。我不确定为什么这不起作用，但现在图像不再在鼠标悬停时开始循环，只是在第一帧保持静止。

对不起，我的错误......看看编辑 - 我在.cycle("pause")之后添加了.end()。

end() 函数记录在api.jquery.com/end。它基本上将当前选择的元素恢复为先前的选择。

啊，我现在明白了，它运行良好！太谢谢你了，真是烦死我了。我真的需要复习一下我的 jQuery。

别担心，我也花了一些时间 - 大约 1-2 年，现在我在工作中非常有名:)。我发现它非常有助于了解基本 JavaScript 的工作原理——比如 var a = 和 a.bob = function() 等。现在我了解了 jQuery 背后的基本原理——它是如何工作的等等。