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

Question

这是我目前拥有的 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

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

谢谢你。

Answer 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'); }
    );
});

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