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

请注意，我今天之前没有使用过（或者甚至没有听过）这个功能，但从逻辑上讲，这应该是你想做的。

如何在页面上的多个缩略图集的翻转上实现jQuery图像循环循环？

1 个答案: