javascriptで複数の画像をランダム表示さたいです・・

Question

お願いいたします！ javascriptで複数の画像をランダム表示さたいのですが。。。４行６列のテーブルを使用し、同じ画像が重ならないようにランダム表示をさせたいのですがうまくいきません。。途中まで出来たものは以下になります───────── ─────────────────────────── 上の物だと１行目は４つのテーブルになるのですが２行目で残りの画像が１列になっていまします。。。どうしたものでしょうか。。。ご教授お願いいたします。

leap_day · Accepted Answer

こんにちは同じ要領ですることが出来ます X○.linkにはurlのパスをあとalt='"+IMAGES[i-1]+"'は確認のためにこうしてますのでそのままだと画像のパスが表示されるようになりますのでLINKSと同じ要領で作ってみてください

leap_day · Answer

こんにちはこんな感じですか？ 20個で止めるなら for(i=1; i<21; i++) にしてください

himajin100000 · Answer

>if(n == 4)

=4じゃなくて「4の倍数」だよな？正確には。(多分最大の原因)

あと、4行6列=24個なのに画像が20個しかないので下手すると無限ループに陥る。オーバーした分をどうするかを考える必要がある。以下のソースでは，
「不足」と表示している。

個人的にdocument.writelnが非常に嫌いなのでDOMを使う

それを踏まえて，
===========================Q3262491-1.js===================
function ListData(){

var ArrayMaxLength = 20;
var ColumnCount = 4;
var RowCount = 6;

var IMAGES=new Array(ArrayMaxLength);

IMAGES[0]="x1.gif";IMAGES[1]="x2.gif";
IMAGES[2]="x3.gif";IMAGES[3]="x4.gif";
IMAGES[4]="x5.gif";IMAGES[5]="x6.gif";
IMAGES[6]="x7.gif";IMAGES[7]="x8.gif";
IMAGES[8]="x9.gif";IMAGES[9]="x10.gif";
IMAGES[10]="x11.gif";IMAGES[11]="x12.gif";
IMAGES[12]="x13.gif";IMAGES[13]="x14.gif";
IMAGES[14]="x15.gif";IMAGES[15]="x16.gif";
IMAGES[16]="x17.gif";IMAGES[17]="x18.gif";
IMAGES[18]="x19.gif";IMAGES[19]="x20.gif";

var UsedFlag =new Array(ArrayMaxLength);
var hogefuga

for (var i = 0; i < ArrayMaxLength; i ++){
UsedFlag[i] = 0;
}

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var caption = document.createElement("caption");

caption.appendChild(document.createTextNode("実験"));

for(var i = 0;i < RowCount; i++){

var tr = document.createElement("tr");

for (var j = 0; j < ColumnCount; j++){
var td = document.createElement("td");
var k = Math.floor(Math.random() * RowCount * ColumnCount);
while (k < ArrayMaxLength && UsedFlag[k] != 0){

k = Math.floor(Math.random() * RowCount * ColumnCount);

}

if (k >= ArrayMaxLength){
td.appendChild(document.createTextNode("不足" + k));
}
else{

/*
object要素使うときは参照先のリソースに対するContent-Typeをきちんと「サーバ」が与えないとjavascript側でtype属性を指定しても
無視される、というバグがFxにはある。Trunkでは修正済み。
Bugzillaの番号忘れた。後で調べる

めったにないだろうが，どうしてもアレだと言う場合
img要素を使用することになるか
*/
var object = document.createElement("object");
object.setAttribute("type","image/gif")
object.setAttribute("data",IMAGES[k]);
object.appendChild(document.createTextNode(k));

td.appendChild(object);
UsedFlag[k] = 1;

}
tr.appendChild(td);

}

tbody.appendChild(tr);

}

table.appendChild(caption);
table.appendChild(tbody);

var display = document.getElementById("display");
display.appendChild(table);

}

===========================Q3262491-1.html===================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<script type="text/javascript" src="Q3262491-1.js"></script>
<title>Q3262491 テストケース1</title>
</head>
<body onload="ListData();">
<div id="display">
</div>
</body>
</html>
=================
IE 7だと固まります。(appendChildかcreateTextNodeがないみたい)
http://oshiete1.goo.ne.jp/qa3205193.html?ans_cou …
回答7が使えるかもしれない。

ああ、そうそう、表示されるのは【添字kであって0から始まっているので】
ファイル名の番号ではない。一応。

================= IE 7だと固まります。(appendChildかcreateTextNodeがないみたい) http://oshiete1.goo.ne.jp/qa3205193.html?ans_count_asc=0 回答7が使えるかもしれない。ああ、そうそう、表示されるのは【添字kであって0から始まっているので】ファイル名の番号ではない。一応。

javascriptで複数の画像をランダム表示さたいです・・

こんにちは

こんにちは

>if(n == 4)

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング