OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

スライドショー

  • 暇なときにでも
  • 質問No.130169
  • 閲覧数133
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 65% (36/55)

初めまして、ちゃりおと申します。
JavaScript初心者です。

あるページに静止画(.jpg)が3枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。

ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか?

諸先輩方、お知恵をおかしください。

//スクリプトここから
<html>
<head>
<title>slideshow</title>
<script language="javascript">
<!--
function autoslide_aisa(){
document.n_aisa.src = "img/aisa_anime.gif";
}
function autoslide_ann(){
document.n_ann.src = "img/ann_anime.gif";
}
function autoslide_mipori(){
document.n_mipori.src = "img/mipori_anime.gif";
}
// -->
</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>

//スクリプトここまで
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全2件)

  • 回答No.1
レベル11

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

これだと、画像が増えれば増えるだけ新しいfuncitionを作ることになりますよね? ・funcitionは一つにまとめて、ファイル名は引数で渡す(と、いうか、ほかのファイルと異なるasiaとかannとかいうところだけ引数にて渡す) ・funcitionは一つにまとめて、ファイルの命名規則を番号にして、引数としては番号だけ渡す ・funcitionは一つにまとめて、アニメGIFファイル名 ...続きを読む
これだと、画像が増えれば増えるだけ新しいfuncitionを作ることになりますよね?

・funcitionは一つにまとめて、ファイル名は引数で渡す(と、いうか、ほかのファイルと異なるasiaとかannとかいうところだけ引数にて渡す)

・funcitionは一つにまとめて、ファイルの命名規則を番号にして、引数としては番号だけ渡す

・funcitionは一つにまとめて、アニメGIFファイル名は配列に格納して、引数としては番号だけ渡す

こんなところでどうでしょ?
補足コメント
chaz

お礼率 65% (36/55)

いろいろ調べて、じゃっかんですが、以下のように改良してみました。
まだ改良の余地ありでしょうか???

//ここから
<html>
<head>
<title>slideshow</title>
<script language="javascript">
<!--
function autoslide(name,src){
document.images[name].src = src;
}
// -->
</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>

//ここまで
投稿日時 - 2001-09-05 16:03:43
  • 回答No.2
レベル11

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

私自身、JavaScript修めたわけじゃないので、心苦しいのですが(^^; 関数がまとまったという意味ではいいのではないでしょうか? ただ、ファイルの名前にそれほど理由がなければ引数一つでもいいような・・・ function autoslide(name){ document.images[name].src = 'img/' + name + '.gif ...続きを読む
私自身、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>
って感じで。
お礼コメント
chaz

お礼率 65% (36/55)

<a href="javascript:void(0);" onClick="javascript:autoslide('n_ann');">

こういうやり方があるんですね。
知りませんでした(^^;;;
いや、大変参考になりました。
ありがとうございます。
投稿日時 - 2001-09-06 10:32:31
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ