jquery - TinyScrollbar - 水平自动滚动

Question

我正在使用 jQuery tinyscrollbar 水平滚动一组图像。现在我想在页面加载保持手动滚动选项时启动它自动滚动。

我遇到了解释如何在垂直 tinyscrollbar 上执行此操作的答案，但我无法将其修改为在水平 tinyscrollbar 上工作。

你能解释一下如何编码吗？这是我第一次使用 tinyscrollbar。

我从http://www.baijs.nl/tinyscrollbar/下载了它

Answer 1

确保你也复制所有的 css 并下载 bg-scrollbar-track-x.png 等的图像。没有它，滚动条将不会呈现。

在这里，仅供参考（注意我将 id 从“scrollbar2”更改为“scrollbar-x”。您必须自己从 tinyscrollbar 站点获取图像：

#scrollbar-x { width: 800px; margin: 20px 0 10px; }
#scrollbar-x .viewport { width: 800px; height: 125px; overflow: hidden; position: relative; }
#scrollbar-x .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0;  }
#scrollbar-x .overview img{ float: left; }
#scrollbar-x .scrollbar{ background: #EDEDED url(../images/scrollbar/bg-scrollbar-track-x.png) no-repeat 0 0; position: relative; margin: 0 0 5px; clear: both; height: 15px; }
#scrollbar-x .track { background: transparent url(../images/scrollbar/bg-scrollbar-trackend-x.png) no-repeat 100% 0; width: 100%; height:15px; position: relative; }
#scrollbar-x .thumb { background: transparent url(../images/scrollbar/bg-scrollbar-thumb-x.png) no-repeat 100% 50%; height: 25px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: -5px; }
#scrollbar-x .thumb .end{ background: transparent url(../images/scrollbar/bg-scrollbar-thumb-x.png) no-repeat 0 50%; overflow: hidden; height: 25px; width: 5px;}
#scrollbar-x .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

Answer 2

在网站示例中，将其设置为水平

$('#scrollbar2').tinyscrollbar({ axis: 'x'});

通过脚本滚动

$('#scrollbar2').tinyscrollbar_update( 50 );

其中50是以像素为单位的数字。所以要自动滚动，你可以创建一个函数setInterval

setInterval(function() { /* scrolling code */ }, 1000); // every second...