重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【終了しました】教えて!gooアプリ版

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

すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。
実際にはスクロールではなく、一度に画像が配列され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="→" />

A 回答 (2件)

#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>
    • good
    • 0

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



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


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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!