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; }

TinyScrollbar - 水平自动滚动

2 个答案: