ジャンル別にランダム画像を表示させるスクリプト

解決済

質問者：087_x
質問日時：2012/07/22 19:31
回答数：4件

タイトルの通り、ジャンル別にランダム画像を表示させるスクリプトを探しています。

イメージとしては、ジャンルAにはA1.jpg, A2.jpg, A3.jpg...のうち一つをランダム表示。
ジャンルBにはB1.jpg,B2.jpg,B3.jpg.....のうち一つをランダムで表示。
などなど複数のジャンルにおいて、画像をランダムに、１ページで表示させたいと考えています。（添付画像ご参照ください）

"javascript 複数ランダム表示"などのキーワードで探したところ、
「複数の画像を重複せずに表示する」などのようなスクリプトでしたので、
新たに質問させていただきました。

PHPでも構いません。
もし知ってらっしゃる方がいましたらよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2012/07/23 22:33

HTMLが不明ですが、基本的には#1のお礼の考え方でもできるはずです。

ただし、#2様の回答にもあるように、
　window.onload = function(){　～～

　window.onload = function(){　～～
を繰り返さすと、毎回上書きされてしまいますので、最後のものしか有効になりません。

処理を少しまとめて、id="hoge"直下のdiv要素に順に背景を設定する一例。
（数はいくつでもかまいません）

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>

<script type="text/javascript">

</script>
</head>

<body>

<div id="hoge">
　<div>categoryA</div>
　<div>categoryB</div>
　<div>categoryC</div>
　<div>categoryD</div>
</div>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin 様
ご回答、そして丁寧なご説明ありがとうございます。

まさにやりたかったことはfujillin様のご回答そのものです。
参考にさせていただきます。

ご回答いただき感謝しております。ありがとうございました。

通報する

お礼日時：2012/07/24 01:40

No.4

回答者： taloo
回答日時：2012/07/24 01:35

こういう書き方もあるという事で。

この処理にいちいちnewは無いだろうと思いつつ。。。個人的にこういう作り方が主流なので。

<script>

(function(){

function Change(args){
this.el=(typeof args[0]==='string')?document.getElementById(args[0]):args[0];
this.srcs=args.slice(1);
this.setImage();
}
Change.prototype={
randomImg: function(){
return this.srcs[ Math.floor(Math.random() * this.srcs.length) ];
},
setImage: function(){
this.el.style.backgroundImage='url('+this.randomImg()+')';
}
}

window.onload=function(){
var cates=[
['Acategory', 'A1.jpg', 'A2.jpg', 'A3.jpg'],
['Bcategory', 'B1.jpg', 'B2.jpg', 'B3.jpg'],
['Ccategory', 'C1.jpg', 'C2.jpg', 'C3.jpg'],
['Dcategory', 'D1.jpg', 'D2.jpg', 'D3.jpg']
];
for( var i=0, cate; cate=cates[i]; i++ ){
new Change(cate);
}
};

/*
window.onload=function(){
var cates=[
['A1.jpg', 'A2.jpg', 'A3.jpg'],
['B1.jpg', 'B2.jpg', 'B3.jpg'],
['C1.jpg', 'C2.jpg', 'C3.jpg'],
['D1.jpg', 'D2.jpg', 'D3.jpg']
];
var divs=document.getElementById('container').getElementsByTagName('div');
for( var i=0, div; div=divs[i]; i++ ){
cates[i].unshift(div);
}
for( var i=0, cate; cate=cates[i]; i++ ){
new Change(cate);
}
};
*/

//------------------------------
function Change2(el, srcs){
this.el=(typeof el==='string')?document.getElementById(el):el;
this.srcs=srcs;
this.setImage();
}
Change2.prototype={
randomImg: function(){
return this.srcs[ Math.floor(Math.random() * this.srcs.length) ];
},
setImage: function(){
this.el.style.backgroundImage='url('+this.randomImg()+')';
}
}
window.onload=function(){
var cates=[
['A1.jpg', 'A2.jpg', 'A3.jpg'],
['B1.jpg', 'B2.jpg', 'B3.jpg'],
['C1.jpg', 'C2.jpg', 'C3.jpg'],
['D1.jpg', 'D2.jpg', 'D3.jpg']
];
var divs=document.getElementById('container').getElementsByTagName('div');
for( var i=0; i<cates.length; i++ ){
new Change2(divs[i], cates[i]);
}
};

})();
</script>

<div id="container">
<div id="Acategory"></div>
<div id="Bcategory"></div>
<div id="Ccategory"></div>
<div id="Dcategory"></div>
</div>

（未検証です。HTML部分は同じで、３パターンです。）

---------------
http://okwave.jp/qa/q7548901.html
手続き型とOOPでは作り方がまるで違うので、勉強したい方を勉強すればいいと思います。
JavaScriptではクロージャーが有効に使えますので、また違った作り方（No.3)になると思います。
No.1、No.2のは手続き型です。

- 0
- 件

通報する

No.2

回答者： taloo
回答日時：2012/07/23 10:45

window.onload=function(){} という形でonloadを書き換えると、最後に代入したものしか実行されません。

-----------

function A(){
//Aカテゴリーの内容を表示する処理
}

function B(){
//Bカテゴリーの内容を表示する処理
}

function C(){
//Cカテゴリーの内容を表示する処理
}

function D(){
//Dカテゴリーの内容を表示する処理
}

window.onload=function(){
A();
B();
C();
D();
}

------------------

同じような記述は
ループや関数化などを駆使して、もうちょっと工夫してみてください。

- 0
- 件

通報する

この回答へのお礼

taloo様

引き続き、ご回答ありがとうございます。
なるほど、どんどん上書きになっていくのですね・・
大変参考になりました。ありがとうございました。

通報する

お礼日時：2012/07/24 00:47

No.1

回答者： taloo
回答日時：2012/07/23 01:00

「javascript ランダム表示」で検索してみてください。

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございました。
そちらの検索ワードでも調べ、ランダムの記述を試みているのですが、うまくいきません。

変数というのでしょうか、そこを変えればうまくいくかと思い下記のように記述しました。
<script type="text/javascript">
window.onload = function(){
var Acate=[];
Acate[0] = 'A1.jpg';
Acate[1] = 'A2.jpg';
Acate[2] = 'A3.jpg';
var n = Math.floor(Math.random() * Acate.length);
var elm = document.getElementById('Acategory');
elm.style.backgroundImage = 'url(' + Acate[n] + ')';
}
</script>

<script type="text/javascript">
window.onload = function(){
var Bcate=[];
Bcate[0] = 'B1.jpg';
Bcate[1] = 'B2.jpg';
Bcate[2] = 'B3.jpg';
var n = Math.floor(Math.random() * Bcate.length);
var elm = document.getElementById('Bcategory');
elm.style.backgroundImage = 'url(' + Bcate[n] + ')';
}
</script>
・
・
・

現段階ではこのような感じです。
考え方が違うのかなと思いました。

ご存知でしたら、taloo様、ご教授願います。