画像が自動で残像が残るように切替わるようにしたい

前へ 次へ
このQ&Aのポイント
  • 写真画像を表示したい場所に、写真画像が自動的に切り替わるようにしたいのです。
  • 切り替わる際にはブラックアウト？一旦暗くなるようにして画像が切り替わるようにしたいです。
  • 切り替わった後には文字が表示されるように出来れば更によいのですが、画像が一定時間で自動で切り替わるようにしたいのが一番の目的です。
回答を見る
  • ベストアンサー

画像が自動で残像が残るように切替わるようにしたい

写真画像を表示したい場所に、写真画像が自動的に切り替わるようにしたいのです。しかも、その切り替わる際にはブラックアウト？一旦暗くなるようにして画像が切り替わるようにしたいです。又は、暗くならなくても残像が残るようにでもかまいません。切り替わった後には文字が表示されるように出来れば更によいのですが、画像が一定時間で自動で切り替わるようにしたいのが一番の目的です。javascriptによる切り替えだと思いますが、解る方がいましたら教えてください。 具体的には下記のアドレスのホームページでの車の写真が切り替わる表示をご覧ください。 　http://good.vg/ さらには、例えば、切り替え用の画像を「sozai」と言うホルダに写真画像（横730ピクセル×縦300ピクセルサイズの画像）「01.jpg」「02.jpg」って感じで数枚用意し、その画像を使用した場合のスクリプトを教えていただければ幸いです。 お手数をお掛け致しますがよろしくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

http://good.vg/のスライドショーは#1さんも取り上げてますが、 jQueryプラグイン（jquery.js、s3Slider.js）が使われてます。 s3Slider.jsを使ったスライドショーの設置例説明サイトもたくさんあります。 例えば http://motoshige.net/archives/842 とか。 上の設置例にはjquery-1.6.2.min.jsとs3Slider.jsが使われてます。 （jquery-1.6.2.min.jsとs3Slider.jsは上記URLからダウンロード出来ます） 黒でフェードイン・フェードアウトさせるには背景色を黒にします。 画像ディレクトリ（「sozai」）は便宜指定すれば良いです。

gunhiro
質問者

お礼

torayoshiさん： お忙しい中、とても詳しいご説明有難うございました。 かなり解り易かったです。 有難うございました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

JQueryを探しましょう。 ★画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) - かちびと.net ( http://kachibito.net/web-design/224-image-jquery-collection.html ) のベーシックにある 41. A Simple jQuery Slideshow / フェードのみのシンプルなスライド とか・・

gunhiro
質問者

お礼

ORUKA1951さん： お忙しい中、ご回答有難うございました。 とても参考になり勉強になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 残像を残しながらjpg画像を自動的に切り替える方法

    HPに残像を残しながらjpg画像を自動的に切り替える動画を、どのブラウザ（InternetExplorerやFirefox、Google Chrome等すべて）を使っても表示できる様にしたいのですが、それを可能にする方法はないでしょうか？ サーバーは、ＡＳＪホスティングサービスを使っています。 記述は、JavaScriptを使用しており、現在InternetExplorerでのみ表示される状況です。 なお、サポートセンターに問い合わせて返ってきた回答が以下の通りです。 InternetExplorer以外にはfilterが実装されていないため、FirefoxやGoogle Chrome等のブラウザでは表示されていないかと思われます。 その為、同様の動作をするjsライブラリを利用されますか、flashなどに置き換えて利用下さい。 との事で、 現在の、JavaScriptの記述は以下の通りです。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=4000; var image= new Array(); image[0]='/フォルダ/画像1.jpg'; image[1]='/フォルダ/画像2.jpg'; image[2]='/フォルダ/画像3.jpg'; image[3]='/フォルダ/画像4.jpg'; image[4]='/フォルダ/画像5.jpg'; image[5]='/フォルダ/画像6.jpg'; image[6]='/フォルダ/画像7.jpg'; image[7]='/フォルダ/画像8.jpg'; image[8]='/フォルダ/画像9.jpg'; image[9]='/フォルダ/画像10.jpg'; image[10]='/フォルダ/画像11.jpg'; image[11]='/フォルダ/画像12.jpg'; image[12]='/フォルダ/画像13.jpg'; image[13]='/フォルダ/画像14.jpg'; image[14]='/フォルダ/画像15.jpg'; image[15]='/フォルダ/画像16.jpg'; image[16]='/フォルダ/画像17.jpg'; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>15) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> <BODY bgcolor="#ffffff" onLoad="imgchange()"> <DIV align="center"> <IMG src='img01.jpg' id="imgframe" style="filter:blendTrans"> </DIV> </BODY> これと同様の動作をするjsライブラリはありますか？ また、画像をこれと同様の動きで表示させるいい方法はないでしょうか？ よろしくお願いします。

  • JAVA 残像を残す画像の入れ替え

    JAVAスクリプトで、FLASHの様な効果を付けたいのですが・・・ FLASHで画像がフワッと入れ替わるようなものをJAVAで作りたいです。 数枚の画像をエンドレスで入れ替えるだけだと出来るのですが、残像を残しながら入れ替えるものをJAVAで作ることが出来ますでしょうか？ ご存知の方いらっしゃいましたら、よろしくお願い致します。 希望は、クリックしないで、ページ表示されたら、自動で数枚がエンドレスで入れ替わるものです。

  • Javaにて画像を残像が残りつつ変化させリンクもつけたい。

    Javaにて画像を残像が残りつつ数秒ごとに変化させ、 さらにリンクを画像ごとに変え、マウスを置いたときにそれぞれ画像ごとに説明文が出るようにしたいのですが・・・ 説明文はマウスをおいたら付箋みたいに出るあれです。 下記のようなのは見つけて残像するのですが、 リンクなどをどこに挿入していいのかわかりませんので教えてください。 Javaは初心者なのですが休み中に解決してこいと言われました。 宜しくお願いします。 <SCRIPT language="JavaScript"> <!-- var time=3; var rtime=5000; var image= new Array(); image[0]="img01.jpg"; image[1]="img02.jpg"; image[2]="img03.jpg"; var ii=0; function imgchange(){ imgframe.filters.blendTrans.Apply(); imgframe.filters.blendTrans.duration=time; imgframe.src=image[ii]; imgframe.filters.blendTrans.Play(); ii=ii+1; if (ii>2) ii=0; t=setTimeout('imgchange()',rtime); } //--> </SCRIPT> <BODY onLoad="imgchange()"> <DIV align="center"> <img src='img01.jpg' id="imgframe" style="filter:blendtrans" width="300" height="401" alt="トップバナー" /><br /> <br />

  • 画像分割ソフト

    jpg形式の画像を自動的に分割してくれるソフトってありませんか？ 具体的には、jpg画像をドロップすると、 たとえば縦１５ピクセル×横２０ピクセルのところを横１０ピクセルの画像２つとして出力してくれる感じです。 ベクターで画像編集ソフトを探したのですが見つかりません。 やはりこんな都合の良いソフトは無いですかね？

  • JavaScriptで画像を変更する

    質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。

  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • flash 画像を12枚用意して、毎月自動で変更

    あらかじめ画像を12枚用意しておいて、 毎月 1日に表示する画像を自動で切り替えるようにするにはどうすればよいでしょうか？ 下記URLのようなイメージです。 http://flash.xtaro.com/sozai/welcome12.htm 簡単な作り方、もしくはflaを配布しているURL等があったら勉強したいので教えてください。

  • FLASHで曜日に応じた35枚の画像を順に自動更新したい

    Flash CS3(actionscript2.0で制作)を使っており、トップページのFlash画像を毎日自動で更新したいと思っています。 画像は35枚あり、それぞれ曜日に応じたテーマになっております。 その画像を順にその曜日に表示したいと思うのですが、どのようにしたらよいものか困っております。 photo1.jpg　－＞　月 photo2.jpg　－＞　火 photo3.jpg　－＞　水 ： photo7.jpg　－＞　日 photo8.jpg　－＞　月 ： photo35.jpg　－＞　日 というようにphoto1.jpgから順に表示したいのです。 ----------------------------------------------------------- var today = new Date(); var num = today.getDay()+1; gazou_mc.loadMovie("img/photo"+(num)+".jpg"); ----------------------------------------------------------- ↑このように現在は記述しているのですが7つの画像しか表示されないので、35枚順に表示されるようにするにはどうした良いものか、ご教授いただけないでしょうか。 FLASHのactionscriptもjavascriptも初心者でやっとの思いでここまでたどり着きました。 わかりやすく解説しているサイトURLなどでもよいので、 どうかよろしくお願いします。

  • 画像をフォルダから自動読み込み。

    画像をフォルダから自動で読み込み、ランダムに背景に読み込ませたいのです。 ランダムに背景に表示させる方法は以下のスクリプトで達成済みです。 <script type="text/javascript"> var imglst= new Array( "haikei/bg001.jpg", "haikei/bg002.jpg", "haikei/bg003.jpg" ); function randombg(){ var imgnum=Math.floor(Math.random()*imglst.length); document.body.style.backgroundImage="url("+imglst[imgnum]+")"; } </script> <body onload="randombg();"> 上のスクリプトのnew Array()でいちいち画像のフォルダ名/画像名.jpgとかを記述するのではなく、自動でhaikeiという名前のフォルダからやりたいのです。画像数は100枚以上あるのでいちいち書くとファイルサイズも肥大化するので。

  • 日付に基づいたファイル名を自動で表示させたい

    ライブカメラのJPG画像があります。 自動生成される画像名は、日付+連番（0602001.jpgのような）で作成されるとします。 <img src="xxxxx.jpg">で表示させたい場合、xxxxxにはJavascriptで次々と変わるファイル名を持ってくるためにはどうしたらよいでしょうか？ 日付情報はJavascriptでパソコンの日付を持ってくる方法でOKです。どなたかソースを考案、もしくは参考サイトを教えていただけないでしょうか？ よろしくお願いします！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する