设置jScrollPane左右自动滚动，但点击时暂停？

小提琴：http://jsfiddle.net/RJShm/设置jScrollPane左右自动滚动，但点击时暂停？

我有一个jScrollPane，从左到右滚动，然后左转，然后停下来。我想要的是从左到右，从右到左继续滚动，然后重复。我通过使用pane.bind('jsp-scroll-x'...已经非常接近工作了，但似乎无法在一个周期后回滚到右侧。对于当前的代码：

pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) { 
    if (at_right) 
    { 
    api.scrollToX(0); 
    $(this).unbind(event); 
    } 
});

我也想为这个停车时在窗格中的任何点击（滚动条，箭头，内容，任何东西）自动滚动，一下子就没有了几秒钟后，最好重新启动点击。

因此，简而言之，我该怎么办：

使JScrollPane的滚动左/右自动
停止自动滚动没有点击的窗格
重新启动自动滚动时

感谢

编辑：jScrollPane Settings和api为您的方便。

来源

2013-03-07 Samsquanch

我更新了切换无限滚动的处理程序，还实现了点击处理程序来暂停滚动并在超时（5秒）后恢复。见守则草案下方并检查DEMO：http://jsfiddle.net/p6jLt/

var defaultSettings = { 
    showArrows: true, 
    animateScroll: true, 
    animateDuration: 5000 
}, 
pauseSettings = { 
    showArrows: true, 
    animateScroll: false 
}; 

var pane = $('.scroll-pane').jScrollPane(defaultSettings); 

var api = pane.data('jsp'); 
var isFirst = true, 
    posX = 0, 
    isLeft = false, 
    timer; 

pane.bind('jsp-scroll-x', scrollFx) 
    .mousedown(function() { 

    //lets make sure the below is 
    //executed only once after automatic croll 
    if (posX != -1) { 
     $(this).unbind('jsp-scroll-x'); 
     api.scrollToX(posX); 
     api.reinitialise(pauseSettings); //no animation 
     posX = -1; 
    } 
}).mouseup(function() { 
    clearTimeout(timer); //clear any previous timer 
    timer = setTimeout(function() { 
     isFirst = true; 
     posX = 0; //reset the killer switch 
     api.reinitialise(defaultSettings); //animateed scroll 
     pane.bind('jsp-scroll-x', scrollFx); //rebind 
     api.scrollToX(isLeft ? 0 : api.getContentWidth()); //resume scroll 
    }, 5000); 
}); 

var scroll = api.scrollToX(api.getContentWidth()); 

function scrollFx(event, pos_x, at_left, at_right) { 
    if (posX == -1) { //kill scroll 
     $(this).unbind(event); 
     return false; 
    } 

    if (at_right) { 
     api.scrollToX(0); 
     isLeft = true; //used for restart 
    } else if (at_left && !isFirst) { 
     api.scrollToX(api.getContentWidth()); 
     isLeft = false; //used for restart 
    } 
    isFirst = false; 
    posX = pos_x; 
}

问题：插件是小马车与滚动的时候，但是它不破无限滚动。你可能会发现卷轴上的小黑洞，但它大部分是有效的。彻底测试一下，看看它是如何发展的。

来源

2013-03-11 20:01:36

这与我所寻找的非常接近，但它的表现并不像我所希望的那样。理想情况下，当滚动条被点击（所以它可以被拖动）或点击左/右箭头时，动画也会停止，并且像普通滚动条一样运行，直到自动滚动恢复生效。任何方式来做到这一点？ – Samsquanch 2013-03-11 20:17:47

@Samsquanch这个插件似乎不适合这些功能。我们正在编写特技代码以从该插件中获得预期的行为。让我明天花点时间看看它是如何发展的。 – 2013-03-11 20:44:17

@Samsquanch尝试更新的演示，让我知道。 – 2013-03-12 15:59:37

设置jScrollPane左右自动滚动，但点击时暂停？

回答

相关问题