0

jQuery tinyscrollbar を使用して一連の画像を水平方向にスクロールしています。ここで、ページの読み込み時に自動スクロールを開始し、手動スクロール オプションも維持したいと考えています。

垂直のtinyscrollbarでそれを行う方法を説明する回答に出くわしましたが、水平のtinyscrollbarで動作するように変更できませんでした。

コーディングの仕方を教えてください。tinyscrollbar を使用するのはこれが初めてです。

http://www.baijs.nl/tinyscrollbar/からダウンロードしました

4

2 に答える 2

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; }
于 2013-08-05T20:36:55.477 に答える
1

Web サイトの例では、水平に設定します

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

スクリプトでスクロールするには

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

は50ピクセル単位の数値です。したがって、自動的にスクロールするには、次の関数を作成できますsetInterval

setInterval(function() { /* scrolling code */ }, 1000); // every second...
于 2013-06-04T15:41:54.287 に答える