n個のdiv背景を重複なしでランダム表示するjavascript
今回パララックスを使ったサイトを制作したのでその時に必要になったもののメモです。
各divに背景が設定されていてそれを読み込みごとに背景をランダムで表示したいとき。
こんなhtmlだったとしましょう。
<div class="coverbg bg01" id="bg_scene01"> <div class="plates"> 1つめのdivテキスト。 </div><!-- / .plates --> </div><!-- / #bg_scene01 .coverbg bg01 --> <div class="coverbg bg02" id="bg_scene02"> <div class="plates"> 2つめのdivテキスト。 </div><!-- / .plates --> </div><!-- / #bg_scene02 .coverbg bg02 --> <div class="coverbg bg03" id="bg_scene03"> <div class="plates"> 3つめのdivテキスト。 </div><!-- / .plates --> </div><!-- / #bg_scene03 .coverbg bg03 -->
.coverbg { display:block; top: 0; left: 0; width: 100%; min-height: 100%; overflow: hidden; background:#fff; } .bg01 { background:url(/images/bg01.jpg) bottom left; } .bg02 { background:url(/images/bg02.jpg) bottom left; } .bg03 { background:url(/images/bg03.jpg) bottom left; }
まずポイントとなるのが、ランダムで重複なしでcssの設定を振り分けないといけない点。
以下のようなfunctionを作って対応しました。
function randomnum(n){ var i, j, tmp, a = new Array(n); return function (){ if(n > 0){ i = n - 1; j = Math.floor(Math.random() * (n)); tmp = a[i] || i; a[i] = a[j] || j; a[j] = tmp; n = i; return a[i]; }else{ return null; } } };
すべてのjsはこちら
// まずは初期設定の背景をクリア function clearClass () { $("div#bg_scene01").removeClass("bg01"); $("div#bg_scene02").removeClass("bg02"); $("div#bg_scene03").removeClass("bg03"); } // ランダム関数 function randomnum(n){ var i, j, tmp, a = new Array(n); return function (){ if(n > 0){ i = n - 1; j = Math.floor(Math.random() * (n)); tmp = a[i] || i; a[i] = a[j] || j; a[j] = tmp; n = i; return a[i]; }else{ return null; } } }; // 本体 $(document).ready(function(){ // クラス名を配列に var bgclass = new Array("bg01","bg02","bg03"); // クラス付加のためのユニークidを配列に var divs = new Array("div#bg_scene01","div#bg_scene02","div#bg_scene03"); // クラス削除 clearClass(); // 3つのdivが対象なので上のfunctionに3を引数として渡す var num = randomnum(3); // nはdivsのための添字、iはランダムで帰ってくるbgclassの添字 var n = 0; for(var i=num();i!=null;i=num()){ $(divs[n]).addClass(bgclass[i]); n ++; } });
こんなんでいいのか。