締切済み

スライドショー

2001/09/05 11:50

初めまして、ちゃりおと申します。 JavaScript初心者です。あるページに静止画（.jpg）が３枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか？諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript">  </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで

chaz
お礼率65% (36/55)

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

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

みんなの回答

sight
ベストアンサー率53% (199/370)

2001/09/05 16:59 回答No.2

私自身、JavaScript修めたわけじゃないので、心苦しいのですが（＾＾；関数がまとまったという意味ではいいのではないでしょうか？ただ、ファイルの名前にそれほど理由がなければ引数一つでもいいような・・・ function autoslide(name){ document.images[name].src = 'img/' + name + '.gif'; } のように。ただ、n_asiaなどのn_はname属性のn_、という意味を与えているみたいですからいやですかね。あと、アンカータグの中でのJavaScriptの呼び出しですが、href属性に書いて大丈夫なのでしょうか？自分はやったことないのでちょっと怖いな、と思っています。私だったら、 <a href="javascript:void(0);" onClick="javascript:autoslide('n_ann');"> <img src="img/ann1.jpg" name"n_ann" border="0"> </a> って感じで。

質問者

お礼 2001/09/06 10:32

<a href="javascript:void(0);" onClick="javascript:autoslide('n_ann');"> こういうやり方があるんですね。知りませんでした（＾＾；；；いや、大変参考になりました。ありがとうございます。

sight
ベストアンサー率53% (199/370)

2001/09/05 12:03 回答No.1

これだと、画像が増えれば増えるだけ新しいfuncitionを作ることになりますよね？・funcitionは一つにまとめて、ファイル名は引数で渡す（と、いうか、ほかのファイルと異なるasiaとかannとかいうところだけ引数にて渡す）・funcitionは一つにまとめて、ファイルの命名規則を番号にして、引数としては番号だけ渡す・funcitionは一つにまとめて、アニメGIFファイル名は配列に格納して、引数としては番号だけ渡すこんなところでどうでしょ？

質問者

補足 2001/09/05 16:03

いろいろ調べて、じゃっかんですが、以下のように改良してみました。まだ改良の余地ありでしょうか？？？ //ここから <html> <head> <title>slideshow</title> <script language="javascript">  </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="8" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide('n_aisa','img/anime_1.gif')"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> </tr> <tr> <td align="center"> <a href="javascript:autoslide('n_ann','img/anime_2.gif')"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> </tr> <tr> <td align="center"> <a href="javascript:autoslide('n_mipori','img/anime_3.gif')"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //ここまで