小提琴:http://jsfiddle.net/RJShm/
我有一个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设置和api接口。
发布于 2013-03-11 20:01:36
我已经更新了用于切换无限滚动的处理程序,还实现了单击处理程序来暂停滚动并在超时(5秒)后恢复。请参阅下面的代码草稿,并检查演示: 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;
}问题:插件有时带有滚动器,但它不会破坏无限滚动。你可能会在卷轴上找到小希克斯,但它在大部分情况下都能工作。彻底测试一下,看看结果如何。
https://stackoverflow.com/questions/15282918
复制相似问题