jCarousel - 如何通过自动滚动暂停悬停？

Posted 2023-05-08

【中文标题】jCarousel - 如何通过自动滚动暂停悬停？

【英文标题】：jCarousel - how to get pause on hover with autoscroll?

【发布时间】：2012-02-11 15:58:39

【问题描述】：

JCarousel 最近发生了变化（2011 年 1 月）。 它曾经有一种通过自动滚动实现悬停暂停的方法。

在新版本中，我无法解决如何让自动滚动在悬停时停止： 我希望滚动在鼠标悬停时停止并在鼠标悬停时重新开始。 有什么建议吗？

示例代码在这里 - http://testsite3.dk/jcarousel/ Jcarousel 在这里：github.com/jsor/jcarousel

链接到 JQuery + javascript 以在此处加载拇指 - http://testsite3.dk/jcarousel/autoscroll.txt

【问题讨论】：

此问题已修复。请看：code.google.com/p/jcarausel-lite-pause-on-hover-fixed

@saikatbiswas82 您的 jcarouselite 版本似乎不起作用。

对于那些希望在 jcarouselite 中实现此功能的人，请参阅 ***.com/questions/8013595/…

【参考方案1】：

将此代码添加到您的 jcarousel initCallback(carousel)

 carousel.clip.hover(function() 
    carousel.stopAuto();
, function() 
    carousel.startAuto();
); 

【参考方案2】：

我无法让前面的示例正常工作。但是我确实得到了以下内容来使用最新的 jcarousel。

$('.carousel').jcarouselAutoscroll(

    interval: 4000, 
    scroll: '+=1',
    create: $('.carousel').hover(function() 
    
        $(this).jcarouselAutoscroll('stop');
    ,
    function() 
    
        $(this).jcarouselAutoscroll('start');
    );
);

【讨论】：

试过这个并得到Uncaught Error: Cannot call methods on jcarouselAutoscroll prior to initialization; attempted to call method "stop"

@Howdy_McGee 在调用 $('.carousel').jcarouselAutoscroll(); 之前你必须先调用 $('.carousel').jcarousel();；

【参考方案3】：

更新答案以保持最新状态。

正确答案见https://github.com/jsor/jcarousel/issues/568：

$('.jcarousel').hover(function() 
    $(this).jcarouselAutoscroll('stop');
, function() 
    $(this).jcarouselAutoscroll('start');
);

【参考方案4】：

您可以在创建回调中绑定自己的悬停事件：

  .jcarouselAutoscroll(
    autostart: true,
    interval: 1000,
    scroll: '+=3',
    create: $('#thumbs').bind('mouseenter', function () 
                $(this).jcarouselAutoscroll('option', 'scroll', '+=0' );
            ).bind('mouseleave', function () 
                $(this).jcarouselAutoscroll('option', 'scroll', '+=3' );
            )

  );

【讨论】：

嗨 - 感谢您的回答。这就像演示中的魅力一样。它将用于从 Vimeo 中提取拇指并单击拇指在页面上加载视频的站点。滚动在这里也可以正常工作，视频按预期加载，并且滚动在 mouseenter 和 mouseleave 上开始和停止。但是：如果我在拇指上停留的时间不仅仅是点击，那么就像 5 sek。滚动停止但不会在 mouseleave (?) 上重新开始。我已经包含了一个指向用于在问题中加载拇指的 javascript 的链接。我无法链接到测试站点，抱歉，非常欢迎提出建议。

mouseleave 事件未按预期工作时是否会触发？

如果我在 Firebug 中观看滚动，即使拇指没有在屏幕上滚动，我也会看到滚动的节奏仍在继续。这在示例和网站上都有。示例代码按预期继续。但是在网站上（拇指从 Vimeo 加载的地方）我看到滚动只有一次，然后就没有了。 （仅在悬停不延长时才起作用）。似乎必须以某种方式重新开始......