【问题标题】:jCarousel - how to get pause on hover with autoscroll?jCarousel - 如何通过自动滚动暂停悬停?
【发布时间】: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

【问题讨论】:

标签: jquery hover jcarousel autoscroll


【解决方案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 加载的地方)我看到滚动只有一次,然后就没有了。 (仅在悬停不延长时才起作用)。似乎必须以某种方式重新开始......
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-10-08
      • 1970-01-01
      • 1970-01-01
      • 2013-12-01
      相关资源
      最近更新 更多