java スライド クリック メニューについて

質問

左右に矢印画像がありクリックでサムネイルが移動するようなスクリプトにしたいです。

すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。
実際にはスクロールではなく、一度に画像が配列されarrow_lをクリックすれば左にarrow_rをクリックすれば右に画像が移動するというようなサムネイル画像を作りたいのですが、以下のソースからどのようにすれば良いでしょうか？
また参照できるサイトがあればお教えいただきたく思っております。
何卒宜しくお願いします。

<input type="image" src="img/arrow_l.gif" id="左" onclick="hs.direction='left'" value="←" />

<marquee id="hs" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()">
<img src="images/sum-bw2.jpg" alt="bw" hspace="2" border="0" />
<img src="images/sum-ex2.jpg" alt="bw" hspace="2" id="bw" />
<img src="images/sum-sh2.jpg" alt="bw" hspace="2" id="bw2" />
</marquee>
<input type="image" src="img/arrow_r.gif" onclick="hs.direction='right'" value="→" />

回答No.2

fujillin

#1です。

指定方法を変えれば、<marquee>のままでもなんとかなりそうな気がしたので試してみました。　一応は動くようです。
　* 指定方法を変えています。
　* 一部のブラウザでは方向を変えたときに、位置が飛んでしまいます。
（2、3のブラウザしか試してないけれど、同じ位置で逆転しないものあり）

<input type="image" src="img/arrow_l.gif" id="左" onclick="direction('hs','left')" value="←" >
<marquee id="hs" scrollamount="6" onmouseover="stop(this)" onmouseout="start(this)">
<img src="images/sum-bw2.jpg" alt="bw" hspace="2" border="0">
<img src="images/sum-ex2.jpg" alt="bw" hspace="2" id="bw">
<img src="images/sum-sh2.jpg" alt="bw" hspace="2" id="bw2">
</marquee>
<input type="image" src="img/arrow_r.gif" onclick="direction('hs','right')" value="→">

<script type="text/javascript">
function stop(e) { e.scrollamount = 0; }
function start(e) { e.scrollamount = 6; }
function direction(id, dir) {
document.getElementById(id).direction = dir;
}
</script>

回答No.1

fujillin

＞以下のソースからどのようにすれば良いでしょうか？

どうしても<marquee>タグで実行したいのであれば、本来の<marqee>の動作を追加・変更しないとならないのでは？（prototyoeなどで）
それよりは、別に作成したほうが良さそうに思います。

似たようなライブラリがいろいろあると思いますので、探してみるのも一法かと。
ちょっと探してみたもの
（オプションなどで、どの程度動作を変えられるのかは未確認）
http://www.php-help.ro/examples/slideitmoo_1.1/
http://css-tricks.com/startstop-slider/
http://jqueryfordesigners.com/demo/slider-gallery.html
http://css-tricks.com/examples/MovingBoxes/
http://www.openstudio.fr/jquery/

ちゃんと探せば、もっとご希望に近いものがあるかも…