複数の画像を横にスクロールさせるボタンについて

質問

複数の画像を横にスクロールさせるボタンについて

こちらのサイト（www.japanican.com/index.aspx）の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるボタンはどのようにすればできますか。Javascriptは扱ったことがないのでわかりやすく教えていただければ助かります。よろしくお願いいたします。

回答No.1

yyr446 · ベストアンサー

複数の画像を横にスクロールさせる方法は様々なパターンがありますが、
ご提示のサイトでは、スクロールさせたい<DIV>にidを付けて、その<div>内に
（一部略）
<div id="tSContScroll">
<table><tbody><tr><td>画像</td><td>画像</td><td>画像</td>...</tr></tbody></table>
</div>

のように<table>を配置し、<td>にサブネール画像<img>とリンク<a>を配置してますね。

ボタンは、画像で付くって、onclickイベントで、スクロールする対象と、スクロール量
を関数に渡すようにして、CSSで<div>の左右に回り込ませているようです。
（一部略）
<ul>
<li class="left">
<a onclick="pictureScrollLeft('tSContScroll', 169);return false;" ....>
<img src="slider_arr_l.gif" ....></a>
</li>
<li class="right">
<a onclick="pictureScrollRight('tSContScroll', 169);return false;" ....>
<img src="slider_arr_r.gif" ....></a>
</li>
</ul>

javascriptのスクロールさせる関数部分は、

<script tye="text/javascript">
function pictureScrollLeft(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;
if (nowX <= size) {
document.getElementById(idname).scrollLeft = 0;
} else {
document.getElementById(idname).scrollLeft = nowX - size;
}
}

function pictureScrollRight(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;

if (nowX > document.getElementById(idname).width - (size * 2)) {
document.getElementById(idname).scrollLeft = document.getElementById(idname).width - size;
} else {
document.getElementById(idname).scrollLeft = nowX + size;
}
}
</script>
となってますね。

後は、CSSで見栄えを調整しているといったところです。

他にも画像スクロールのjavascriptライブラリーは、たくさんあります。

例えば、jQueryベースですが、

「jCarousel Lite」
http://gmarwaha.com/jquery/jcarousellite/index.php#demo

「jCarousel」
http://sorgalla.com/jcarousel/

等など...

お礼

ご丁寧に回答いただきましてありがとうございました。