jCarousel - 如何使用autoscroll进行悬停暂停?

时间:2012-01-16 18:31:48

标签: jquery hover jcarousel autoscroll

JCarousel最近改变了(2011年1月) 以前它有一种方法可以使用autoscroll实现悬停暂停。

使用新版本我无法解决如何在悬停时停止自动滚动:
我希望滚动停止鼠标悬停并在mouseout上重新开始 有什么建议吗?

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

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

4 个答案:

答案 0 :(得分:13)

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

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

答案 1 :(得分:5)

我无法让前面的例子正常工作。但我确实得到了以下与最新的jcarousel合作。

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

答案 2 :(得分:1)

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

请参阅https://github.com/jsor/jcarousel/issues/568以获取正确答案:

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

答案 3 :(得分:0)

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

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

  });