背景画像を切り替えるプラグイン

2010/12/17 15:20

このQ&Aのポイント

指定した背景画像を数秒ごとに切り替えるプラグインを使用したいが使い方がわからない。
サイトからダウンロードしたプラグインの使い方が理解できず、背景画像の変更方法も分からない。
java初心者が背景画像の変更プラグインを使用したいが、設定方法がわからず困っている。

指定した背景画像を数秒ごとに切り替えるプラグイン

java初心者です。というか申し訳ありませんが全くわかりません。しかし、どうしても指定した背景画像を数秒ごとに切り替えなければならなくなり、下記のサイトで jQueryプラグインをダウンロードしたのですが使い方が全くわかりません。 http://rewish.org/demo/jquery_bg_switcher/ ダウンロードしたファイルの中にあったexample.htmlを見たのですがどこで背景画像を変更したらいいのか分からず、 <title>jQeury.bgSwitcher.js</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> head内にあるこの文章の意味もわかりません。下の<script src="../jquery.bgSwitcher.js"></script>はjquery.bgSwitcher.jsの場所を指定しいるということはわかるのですが、なぜ上の２行にはgoolgeがついているのか。 flashを使わず背景画像を変更したいのですが、どなたか使い方が分かる方はいらっしゃいますか。いたら教えていただけたらうれしいです。また、start、stopなどの機能もついていたのですが、私には必要なく TOPのメイン画像を背景画像に指定し、３、４秒で順番に切り替えたいのです。（現在未定ですが、もしかしたら5枚ほど画像を切り替えたら最後の１枚で画像をstopさせるかもしれません）ちなみに画像は imgフォルダの中に入っていて main1からmain5の5枚あり、widthが770pxにheightが279pxです。もし他にもっと簡単なやり方などあれば教えていただけたらうれしいです。 javaのことが全然分からないため至らぬ点が多々あると思いますが、どうぞよろしくお願いいたします。

rossi46mail
お礼率96% (251/260)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

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

ベストアンサー

metametamu
ベストアンサー率51% (153/295)

2010/12/17 17:30 回答No.1

あまり詳しくは知りませんが、多分最初の <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> の部分はjqueryを読み込むためのものです。 googleのサービスを利用してjQueryの特定のバージョンを読み込んでいるのだと思います。 <script src="../jquery.bgSwitcher.js"></script> これはプラグインを読み込む部分ですね。 http://rewish.org/javascript/jquery_bg_switcher 一応説明のページにも書いてある通り、 jQuery(function($) { $('#example').bgSwitcher({ images: ['image1.jpg', 'image2.jpg', 'image3.jpg'], interval: 2000 }); }); の部分で画像の指定がしてあります。 'image1.jpg', 'image2.jpg', 'image3.jpg'の部分ですね。ファイル名は半角の　【　'　】で囲って、ファイル同士は【　,　】で区切ります。【　,　】の前後は半角スペースや改行があっても構いませんが、ファイル名を【　'　】で囲む時はスペース等無駄なものを書かないように気をつけておくくらいでしょうか。この指定をscriptタグで囲って、jQuery読み込みの記述の後に、head内に指定してやります。 <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> <script type="text/javascript"> Query(function($) { $('#example').bgSwitcher({ images: ['image1.jpg', 'image2.jpg', 'image3.jpg'], interval: 2000 }); }); </script> あとどうでもいいことなんですが、javaとjavascriptは呼び方が似てますが別物ですよー。javascriptは略して書く時はJSとかでjavaにはならないです。

質問者

お礼 2010/12/20 09:00

詳しく説明していただきありがとうございます。すごく分かりやすくてためになりました。早速やってみたいと思います＾＾本当にありがとうございます。あと、JSもためになりました＾＾

その他の回答 (1)

babu_baboo
ベストアンサー率51% (268/525)

2010/12/17 18:17 回答No.2

かこにもなんどか、かいたことはありますが、そのりめーくばんです。たまには、みじかくかいてみないとね。「だんな～、ぽっきりですぜぇ～これぽっきり」ぜんかくくうはくは、はんかくにしてね。 <!DOCTYPE html> <title></title> <style type="text/css"> #menu { width: 770px; height: 279px; margin: 0; padding: 0; ist-style: none; overflow: hidden; position:relative;} #menu li { position: absolute; top: 0; left: 0;} #menu img { border: none; width: 770px; height: 279px;} </style> <ul id="menu"> 　<li><a href="htp:/test1/"><img src="./img/0.gif" alt="test1"></a></li> 　<li><a href="htp:/test2/"><img src="./img/1.gif" alt="test2"></a></li> 　<li><a href="htp:/test3/"><img src="./img/2.gif" alt="test3"></a></li> </ul> <script> function ImageChanger(i,w){//@cc_on 　var p=document.getElementById(i),l=p.getElementsByTagName('LI'),a,t;N(); 　function N(){L(a=0,t=l[0],p.appendChild(t))} 　function L(){ 　　t.style./*@if(1)filter='Alpha(opacity='+a+')'@else@*/opacity=a/100/*@end@*/; 　　return(a+=5)==105?setTimeout(N,w):setTimeout(L,20); 　} } ImageChanger ('menu', 3000); </script>

質問者