- 締切済み
jqueryを使用したギャラリー
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm 上記URLを利用しているのですが自動再生をtrueにすると1番最初の画像で停止してしまいます。 希望としては自動で画像の切り替えを行い最後の画像であれば停止させたいのですがオプション 設定で可能なものでしょうか？ ドキュメントを読んでみたのですが英文で全く理解できない状態です。 また、サムネイルや再生ボタン等は必要ないので指定のdiv内にフェードインフェードアウトで 画像の切り替えができるものがありましたら教えてください！
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
他のライブラリーとしては、いろいろあるでしょうが、 最近みかけたもので、少々古いですが「CSS Crossfader」 http://oshiete1.goo.ne.jp/qa5522443.html http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html なんかシンプルですね。 それなんか、ほとんど説明がついていないんですよ。 画像じゃなくても、選択したIDのついた<div>の内容を、 次々にフェードイン・フェードアウトするのが売りみたいですね。 それにしても、この手のライブラリーって海外製のものばかりで、 英文説明を読むのは必須ですね。たまに日本のサイトがあったと 思ったら、海外製ライブラリーの使い方サイトだったりして、 なぜ、国産のがないのか、我の探し方が悪いのか．．．．
- mtaka2
- ベストアンサー率73% (867/1179)
オプションで onslide:function(curslide, i){ if (i == this.setting.imagearray.length-1) this.navigate("pause"); } といった指定をすれば、最後の画像を表示したところで止まるようになるかと思います。
お礼
お返事ありがとうございます。 教えて頂いた方法でバッチリできました！マニュアルを見てもさっぱりだったので 本当に助かりました。ありがとうございます^^
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryとかよく知らないので、直に… 指定のdiv(サンプルではphoto)内の画像を重ねておいて、単純に上から順にフェードアウトさせているだけです。 <html> <head><title>test</title> <style type="text/css"> div#photo { position:relative; width:200px; height:100px; } div#photo img { position:absolute; top:0; left:0; } </style> <script type="text/javascript"> window.onload = function() { func('photo'); } function func(id) { var intvl = 4000; //←次の画像処理までの時間(msec) var fspeed = 50; //←フェードアウトの速度(msec) var fstep = 3; // ←フェードアウトの透明度の変化率 if (id) this.id = id; var i, e, op = 100; setTimeout(search, intvl); function search() { var elm = document.getElementById(this.id).getElementsByTagName('IMG'); for (i = elm.length-1; i>0; i--) if (elm[i].style.display != 'none') { e = elm[i]; fade(); break; } } function fade(){ op -= fstep; if (op<0) op = 0; //@cc_on e.style. /*@if( @_jscript ) filter = 'alpha(opacity='+ op +')' @else@*/ opacity = ( op / 100 ) + '' /*@end@*/; if (op>0) { setTimeout(fade, fspeed); } else { e.style.display = 'none'; setTimeout(function(){ func(); }, fspeed); } } } </script> </head> <body> <div id="photo"> <img src="A.jpg" alt="testA"> <img src="B.jpg" alt="testB"> <img src="C.jpg" alt="testC"> <img src="D.jpg" alt="testD"> <img src="E.jpg" alt="testE"> </div> </body> </html>
お礼
お返事ありがとうございます。 試してみたところ問題なく動作しました！jqueryというのも流行りに乗っているだけという 感じなのですがこのような方法でも実現可能なのですね。jsは難しいです^^;
お礼
お返事ありがとうございます。 確かに探し方が悪いのか基本的に海外製のライブラリばかりですよね。 読む努力はしているのですが理解できるはずもなくサンプル通り以外の使い方がわからないという 状況に陥ります^^: ライブラリーのご紹介ありがとうございます。単純にフェードイン、フェードアウトの切り替えが したかったので一度チャレンジしてみたいと思います。