アプリ版:「スタンプのみでお礼する」機能のリリースについて

HPにバナーを起きたいのですが、配置順序をランダムに入れ替えたいのです。ランダムバナーで調べても複数の画像の中から1つが表示される物しかなく自分ではどうもできないので困ってます。

バナー数は10個で10個表示で順序だけ入れ替える物が欲しいのですがよろしくお願い致します。

できれば、テーブルでレイアウトしてますのでテーブルに配置しやすい物がいいんですが…。

A 回答 (3件)

配置を換えて10個のファイルを作っておき、


Math.random()関数でそのファイルを選び表示させればいいような気がします。
    • good
    • 0
この回答へのお礼

早速のお返事ありがとうございます。
javascriptは検索で調べて色々使っているのですが
同じ画像が表示されないで、ランダムに表示されるようにできないのです…

>Math.random()関数でそのファイルを選び表示させればいいような気がします。

スイマセン。まったくやり方がわからないんです。

お礼日時:2004/06/15 21:07

直接の回答ではありませんが、Math.random()の使用例だけご紹介します。


<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function makeRandomNumber() {
random = Math.floor(Math.random()*10+1);
alert("今回発生した乱数 = " + random);
}
// -->
</script>
<title></title>
</head>
<body>
<input type="button" onClick="makeRandomNumber()" value="乱数作成!">
</body>
</html>
どこまでわかっていて、どこからわからないのかをもう少し詳しく書いていただけたらご協力できるかもしれません。
    • good
    • 0

試しに書いてみました。

ご質問で求められている動作は確保できていると思います。

<html>
<head>
<title></title>
<script type="text/javascript"><!--
rndnum= new Array();
rndindx= new Array();
tmpimg = new Array();
rndimg = new Array();

tmpimg[0]="***0.gif";
tmpimg[1]="***1.gif";
tmpimg[2]="***2.gif";
tmpimg[3]="***3.gif";
tmpimg[4]="***4.gif";
tmpimg[5]="***5.gif";
tmpimg[6]="***6.gif";
tmpimg[7]="***7.gif";
tmpimg[8]="***8.gif";
tmpimg[9]="***9.gif";
/* 上記でバナーに使う画像のURLを指定 */

for (i=0; i<tmpimg.length; i++){
rndimg[i]=new Image();
rndimg[i].src= tmpimg[i];

rndnum[i]=i;
}

for (i=0; i<tmpimg.length; i++){
n=Math.floor(Math.random()*rndnum.length);
rndindx[i]=rndnum[n];
rndnum.splice(n,1);
}

function bannerset(){
for (j=0; j<rndimg.length; j++){
document.images["banner"+j].src=rndimg[rndindx[j]].src;
}
}

window.onload=bannerset;
//--></script>
</head>
<body>

<img src="***0.gif" name="banner0" alt="*"><br>
<img src="***1.gif" name="banner1" alt="*"><br>
<img src="***2.gif" name="banner2" alt="*"><br>
<img src="***3.gif" name="banner3" alt="*"><br>
<img src="***4.gif" name="banner4" alt="*"><br>
<img src="***5.gif" name="banner5" alt="*"><br>
<img src="***6.gif" name="banner6" alt="*"><br>
<img src="***7.gif" name="banner7" alt="*"><br>
<img src="***8.gif" name="banner8" alt="*"><br>
<img src="***9.gif" name="banner9" alt="*">

</body>
</html>

上記のソースでは、ページがロードされると「name="banner*"」という属性をもっているimg要素の画像をランダムに差し替えます。 ランダムに画像を取得させても、重複が出ないような工夫を施したつもりです。
img要素は、name="banner*"という属性をつける(banner*の番号は重複させないよう気をつけて下さい)ことさえ忘れなければ、自由に配置できます。
また、バナーの数が変わる場合は、それにあわせてscript要素内のバナーに使う画像のURLを指定している部分と、name="banner*"という属性を持つimg要素の数を増減することで対処できると思います。

こちらのようなソースではいかがでしょうか。
参考になれば幸いです。 見当違いでしたら、ごめんなさい。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!