让 jQuery jScrollPane 在加载时自动滚动一段时间

发布于 2024-11-24 16:27:28 字数 548 浏览 0 评论 0原文

您好，我正在寻找一种解决方案，使 jScrollPane 在页面加载时自动滚动。我发现了一些类似的问题，但它们不是我正在寻找的问题（scrollBy和scrollTo方法）。我目前有以下内容：

$(function(){
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

我想要实现的是让我的水平 jScrollPane 顺利滚动我的内容（照片）： 1. 向右 300px， 2.然后向左滚动300px（回到开头）， 3. 最后到此为止。

有一个设置可以让我控制滚动的平滑度/持续时间/间隔也很有用。

如果您可能想知道它的用途是什么，我不希望任何观众错过他们应该滚动该区域的事实。您可以查看该网站：http://www.giamarescotti.com/v2/

非常感谢提前很久寻求任何建议。

问候，戴夫

原文

Hi I'm looking for a solution to make jScrollPane auto scroll on page load. I found some similar questions but they are not what I am looking for (scrollBy and scrollTo methods).
I currently have the following:

$(function(){
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

What I want to achieve is to have my horizontal only jScrollPane scroll my contents (photographs) smoothly:
1. To the right by 300px,
2. Then scroll back to the left by 300px (back to the beginning),
3. And finally stop there.

It is also useful to have a setting that will allow me to control the smoothness/duration/interval of the scrolling.

In case you may be wondering what the use is, I wouldn't want any viewers to miss that they are supposed to scroll that area. You may view the website at: http://www.giamarescotti.com/v2/

Thank you very much in advance for any advice.

Regards,
Dave

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦行僧 2024-12-01 16:27:28

JScrollPane 支持动画。您需要添加 animateScroll 和 animateDuration （以毫秒为单位），使用 scrollToX 滚动到 #imagesContainer 的宽度> 然后回到 0：

$(function(){
  var pane = $('.scroll-pane');
  pane.jScrollPane({
    showArrows: true,
    autoReinitialise: true,
    animateScroll: true, //added
    animateDuration : 10000//added - length each way in milliseconds
  });

  var api = pane.data('jsp');

  //listen to the x-axis scrolling event
  pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
    //we're at the right now lets scroll back to the left
    if (at_right)
    {
      api.scrollToX(0);
      $(this).unbind(event);//added with edit
    }
  });

  //initial animate scroll to the right
  api.scrollToX(parseInt($('#imagesContainer').width()));
});

JScrollPane supports animation. You need to add animateScroll and animateDuration (in milliseconds), use scrollToX to scroll to the width of the #imagesContainer and then back to 0:

$(function(){
  var pane = $('.scroll-pane');
  pane.jScrollPane({
    showArrows: true,
    autoReinitialise: true,
    animateScroll: true, //added
    animateDuration : 10000//added - length each way in milliseconds
  });

  var api = pane.data('jsp');

  //listen to the x-axis scrolling event
  pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
    //we're at the right now lets scroll back to the left
    if (at_right)
    {
      api.scrollToX(0);
      $(this).unbind(event);//added with edit
    }
  });

  //initial animate scroll to the right
  api.scrollToX(parseInt($('#imagesContainer').width()));
});

回复收藏 0 原文

~没有更多了~