任意の2つのバナーを表示するjQuery Random Banners

September 24, 2011

n個のバナー画像の中から任意の2個のバナーを表示させるjQueryプラグインを考えてみました。

仕様としては、HTML上には全てのバナーを非表示で記述し、任意の2個を表示、バナーを追加しても対応出来る（3個でも4個でも10個でも任意の2個のバナーを表示）と言う仕様です。

キーとなるのは２つの重複しない乱数を求める所です。まず最初に考えたのは2つの乱数を発生させ、それらが重複しなくなるまでループする方法です。

まず変数elemにul#rndBnrの子要素であるliの数を代入します。

var elem = $(this).children().length;

次に変数rnd1とrnd2に子要素の数からランダムにそれぞれ1つの数字を取得して代入します。

var elem = $(this).children().length;
var rnd1 = Math.floor(Math.random() * elem);
var rnd2 = Math.floor(Math.random() * elem);

もしrnd1とrnd2が同じだったら再度乱数を発生させ、rnd1とrnd2が重複しなくなるまでループします。

var elem = $(this).children().length;
var rnd1 = Math.floor(Math.random() * elem);
var rnd2 = Math.floor(Math.random() * elem);
while(rnd1 == rnd2) {
	var rnd2 = Math.floor(Math.random() * elem);
}

これでrnd1とrnd2は重複しない2つの乱数になります。

View Demo

そしてもう一つはループを使わずに重複しない2つの乱数を取得する方法です。

まず同様に変数elemにul#rndBnrの子要素であるliの数を代入します。

var elem = $(this).children().length;

次に変数rnd1に子要素の数からランダムに1つの数字を取得して代入します。

var rnd1 = Math.floor(Math.random() * elem);

ここからが肝。rnd1に入った数と重複しない乱数の対応は以下の通りになります。

rnd1=0, rnd2=1 or 2 or 3
rnd1=1, rnd2=0 or 2 or 3
rnd1=2, rnd2=0 or 1 or 3
rnd1=3, rnd2=0 or 1 or 2

rnd2はrnd1の数を0を除いた整数かつ子要素数-1で割った余りがrnd1と重複しない数になります。

例えばul#rndBnrの子要素が4つだった場合、(rnd1+子要素のインデックス)/子要素の数の余りは次のようになります。

rnd1=0の時
0 + 0 = 0 0/4の余り0(×)
0 + 1 = 1 1/4の余り1(○)
0 + 2 = 2 2/4の余り2(○)
0 + 3 = 3 3/4の余り3(○)
0 + 4 = 4 4/4の余り0(×)
rnd1=1の時
1 + 0 = 1 1/4の余り1 (×)
1 + 1 = 2 2/4の余り2(○)
1 + 2 = 3 3/4の余り3(○)
1 + 3 = 4 4/4の余り0(○)
1 + 4 = 5 5/4の余り1(×)
rnd1=2の時
2 + 0 = 2 2/4の余り2(×)
2 + 1 = 3 3/4の余り3(○)
2 + 2 = 4 4/4の余り0(○)
2 + 3 = 5 5/4の余り1(○)
2 + 4 = 6 6/4の余り2(×)
rnd1=3の時
3 + 0 = 3 3/4の余り3(×)
3 + 1 = 4 4/4の余り0(○)
3 + 2 = 5 5/4の余り1(○)
3 + 3 = 6 6/4の余り2(○)
3 + 4 = 7 7/4の余り3(×)

この事から0を除外した整数かつ子要素数-1の余りが重複しない乱数である事が分かります。

var rnd2=(rnd1 + Math.floor(Math.random() * (elem-1))+1) % elem;

これで2つの重複しない乱数が取得できます。よってrnd1番目とrnd2番目の要素のdisplayをblockにすれば良い訳です。

var rnd1 = Math.floor(Math.random() * elem);
var rnd2=(rnd1 + Math.floor(Math.random() * (elem-1))+1) % elem;		
$(this).children().eq(rnd1).css({'display': 'block'});
$(this).children().eq(rnd2).css({'display': 'block'});

View Demo

ご利用はご自由にどうぞ