私はサムネイルの自動スクロールスクリプトに取り組んできました。JavaScript を複製せずに、複数のバージョンのスクローラーを使用する方法を誰か提案できますか? コードを汎用的にできれば素晴らしいのですが、サムネール スクローラーが機能する DIVS の ID を、おそらく変数で指定してください。助けていただければ幸いです。:)
これはJSFiddleにあります。
JavaScript は次のようになります。
$(function() {
buildThumbs();
function buildThumbs() {
$('div.album').each(function() {
var width = 0;
var wrapper = $(this).find('.st_thumbs_wrapper');
wrapper.find('.st_thumbs a').each( function() {
width += $(this).outerWidth(true);
});
var thumbs = $(this).find('.st_thumbs');
thumbs.css('width', width + 'px');
makeScrollable(thumbs, wrapper);
});
}
function makeScrollable(thumbs, wrapper) {
var width = wrapper.innerWidth();
wrapper.scrollLeft(0);
var leftBuffer = 200;
var rightBuffer = 200;
//When user move mouse over menu
wrapper.unbind('mousemove').bind('mousemove', function(e) {
var xPos = e.pageX - wrapper.offset().left - leftBuffer;
var xMax = wrapper.innerWidth() - rightBuffer;
if(xPos > 0 && xPos < xMax) {
var perc = xPos / (xMax - leftBuffer);
var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
wrapper.scrollLeft(perc * scrollAmt);
}
});
}
});