タイトルの通り、ジャンル別にランダム画像を表示させるスクリプトを探しています。
イメージとしては、ジャンルAにはA1.jpg, A2.jpg, A3.jpg...のうち一つをランダム表示。
ジャンルBにはB1.jpg,B2.jpg,B3.jpg.....のうち一つをランダムで表示。
などなど複数のジャンルにおいて、画像をランダムに、1ページで表示させたいと考えています。(添付画像ご参照ください)
"javascript 複数 ランダム 表示"などのキーワードで探したところ、
「複数の画像を重複せずに表示する」などのようなスクリプトでしたので、
新たに質問させていただきました。
PHPでも構いません。
もし知ってらっしゃる方がいましたらよろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
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">
<!--
#hoge { width:800px; }
#hoge div { width:400px; height:300px; float:left; }
//-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
var setBGImage = (function(){
var div = document.getElementById("hoge").childNodes;
var divs = [];
var i;
for(i=0; i<div.length; i++)
if(div[i].nodeName == "DIV") divs.push(div[i]);
i = 0, div = null;
return function(list){
if(!divs[i]) return;
var images = list.split(",");
var n = Math.floor(Math.random() * images.length);
divs[i++].style.backgroundImage = "url(" + images[n] + ")";
}
}());
setBGImage("A1.jpg,A2.jpg,A3.jpg,A4.jpg");
setBGImage("B1.jpg,B2.jpg,B3.jpg,B4.jpg");
setBGImage("C1.jpg,C2.jpg,C3.jpg");
setBGImage("D1.jpg,D2.jpg,D3.jpg");
}
//-->
</script>
</head>
<body>
<div id="hoge">
<div>categoryA</div>
<div>categoryB</div>
<div>categoryC</div>
<div>categoryD</div>
</div>
</body>
</html>
fujillin 様
ご回答、そして丁寧なご説明ありがとうございます。
まさにやりたかったことはfujillin様のご回答そのものです。
参考にさせていただきます。
ご回答いただき感謝しております。ありがとうございました。
No.4
- 回答日時:
こういう書き方もあるという事で。
この処理にいちいち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部分は同じで、3パターンです。)
---------------
http://okwave.jp/qa/q7548901.html
手続き型とOOPでは作り方がまるで違うので、勉強したい方を勉強すればいいと思います。
JavaScriptではクロージャーが有効に使えますので、また違った作り方(No.3)になると思います。
No.1、No.2のは手続き型です。
No.2
- 回答日時:
window.onload=function(){} という形でonloadを書き換えると、最後に代入したものしか実行されません。
-----------
function A(){
//Aカテゴリーの内容を表示する処理
}
function B(){
//Bカテゴリーの内容を表示する処理
}
function C(){
//Cカテゴリーの内容を表示する処理
}
function D(){
//Dカテゴリーの内容を表示する処理
}
window.onload=function(){
A();
B();
C();
D();
}
------------------
同じような記述は
ループや関数化などを駆使して、もうちょっと工夫してみてください。
taloo様
引き続き、ご回答ありがとうございます。
なるほど、どんどん上書きになっていくのですね・・
大変参考になりました。ありがとうございました。
No.1
- 回答日時:
「javascript ランダム 表示」で検索してみてください。
早速のご回答ありがとうございました。
そちらの検索ワードでも調べ、ランダムの記述を試みているのですが、うまくいきません。
変数というのでしょうか、そこを変えればうまくいくかと思い下記のように記述しました。
<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様、ご教授願います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript を使ってpkゲームを...
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
「nullまたはオブジェクトでは...
-
DIV内のDIV要素を移動する。
-
任意の座標をクリックさせるには
-
RadioButtonListの表示制御
-
addEventListenerで
-
DOMMouseScrollを使って特定のI...
-
イベントに適切な値が伝わらない
-
同じIDで定義した要素の配列を...
-
C#OpenCv V4にのエラーに関する...
-
functionから別のfunctionを実...
-
ジェネレーターの作り方
-
ASP.NET MVCでObjectをjsに渡す
-
window.openでタイトル名の指定
-
undefinedを表示させない方法は...
-
jspからjavascriptの変数引継ぎ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
div要素内の全input要素をdisable
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報