
左右に矢印画像がありクリックでサムネイルが移動するようなスクリプトにしたいです。
すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。
実際にはスクロールではなく、一度に画像が配列され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件)
- 最新から表示
- 回答順に表示
No.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>
No.1
- 回答日時:
>以下のソースからどのようにすれば良いでしょうか?
どうしても<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/
ちゃんと探せば、もっとご希望に近いものがあるかも…
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押すたびに交互に切り...
-
マウスカーソルに合わせて画像...
-
clear機能を失わずにファイルア...
-
サムネイルにカーソルを合わせ...
-
JSPでの画像ファイル表示
-
jspでcssが読み込めない
-
javascriptテキストBOX色を元に...
-
libjpegライブラリの使い方につ...
-
1枚の画像をクリックすると複数...
-
スタイルシートで画面を上下に...
-
css固定したフッターが本文と重...
-
リンクで違うページの指定箇所...
-
UWSC(マウス自動化ソフト)に...
-
クリックした自身の画像を別画...
-
リンク色を動的に変更したい。i...
-
スマートな外部javaでロールオ...
-
リンク先を動的に変更する
-
MAX関数を使ってからLEFT JOIN...
-
jqueryで要素の中身を要素の外...
-
クリックするとテーブルの列の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
javascript ランダム表示
-
ホームページ作成で画像スクロ...
-
JavaScript - 月ごとに画像変化
-
HTMLへ要素の挿入について
-
animateを使用したマウスオーバ...
-
IMGタグごとにCSSを設定する方法
-
一定時間で入れ替わるバナー画...
-
embed要素のsrc属性の値を変更...
-
アニメーションをループさせたい
-
jqueryを使用した画像スクロー...
-
clear機能を失わずにファイルア...
-
jQueryでセレクタに複数のIDを...
-
イラストのボタンを押したとき...
-
吹き出しに画像とコメントを入...
-
セレクトボックスで、リンクバ...
-
Jquery cheeckbox(複数)とsli...
-
複数bxsliderをタブで切り替え...
おすすめ情報