みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

<img src"○.jpg">の○をランダムに!

1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、
それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、
http://asamuzak.jp/html/302を参考にして、
2枚目からランダムにフェードインすることはできました。
しかし、1枚目が必ず同じ画像が表示されてしまいます。
body内の<img src"1.jpg" id="">
の部分が表示される1枚目のようです。
1.jpgを2.jpgにすると2.jpgが最初に表示されます。

1枚目からランダムにフェードインするものを作るには、
この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id="">
にすればいいのでは? と思いました。

自分が考えたコードは、
下記コードの場合の動作は、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title></title>
<script language="JavaScript">
<!--
var n = Math.floor((Math.random() * 29))+1;
//-->
</script>
</head>
<body>
<img src="../images/1.jpg" />
</body>
</html>

1.jpgが毎回必ず表示されます。

ランダムな整数を取得できるJavaScriptを作り、
var n = Math.floor((Math.random() * 29))+1;
その整数を上記コードの
<body>
<img src="../images/1.jpg" />
</body>
の部分を
<body>
<img src="../images/n.jpg" />
</body>
とvar nを入れてやれば
1~30のランダムな整数が入って
ページを更新するたびに画像が変わると考えました。

<img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、
どのようにしたらいいのでしょうか? よろしくお願いします。

投稿日時 - 2011-04-03 04:37:35

QNo.6640594

すぐに回答ほしいです

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

JavaScriptのdocument.writeln
でタグを直接出力すればいいです。

<body>
<script language="JavaScript">
document.writeln("<img src='../images/" + n + ".jpg' />");
</script>
</body>


http://www.tohoho-web.com/js/document.htm#writeDoc
詳しくはここ参照。

”と’ に注意。

投稿日時 - 2011-04-03 19:08:50

お礼

ありがとうございました。

投稿日時 - 2011-09-05 16:32:22

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

No1です。
若干の間違いがありました。

<html>
省略
<head>
省略
</head>
<body>
<script language="JavaScript">
var n = Math.floor((Math.random() * 29))+1;
document.writeln("<img src='../images/" + n + ".jpg' />");
</script>
</body>
</html>

こんなかんじで

投稿日時 - 2011-04-03 21:28:44

お礼

ありがとうございました。

投稿日時 - 2011-09-05 16:32:34

あなたにオススメの質問