TinyScrollbar语言 - 水平自动滚动

Question

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

我遇到了解释如何在垂直tinyscrollbar上做到这一点的答案，但我无法将其修改为在水平tinyscrollbar上工作。

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

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

Answer 1

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

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

通过脚本滚动

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

，其中50为像素数。要自动滚动你可以用setInterval

创建一个函数

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

Answer 2

确保您也复制了所有的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; }