クライアントからバナーをランダムに表示させたいとの要望があって、プラグイン必要かなーとか一生懸命考えてたんですけど、考えてみたらプラグインなんて必要ないしたった数行でできることに気づいた。
ブラウザ側でランダム表示するためには。
方法は、単純に
一旦全部のバナーを非表示にする。
↓
バナーの数を数える
↓
0からバナーの数までの間のランダムな整数を取得
↓
上から数えて○番目のバナーのみ表示する。
ってだけで可能です。jQuery単体で可能です。※もっと言うと、JavaScriptだけでも十分可能です。
実際画面に表示させるには、jQueryでやるほうが簡単なのですが、悩んだのはランダムで表示させる部分。
phpならランダムで抽出する関数があるのですが、JJavaScriptにも無いのかなーそんな素敵な関数って思ってたらありました。
肝心なランダム整数を取得する。
そんなときにはMath.random()でおｋ。
Math.random()は0から１までの範囲でランダムに数字を出力します。
なので、
1 2 3 4 5 | /* 0から10の範囲 */varval=Math.round(Math.random()*10); /* 1から10の範囲 */varval=Math.ceil(Math.random()*10); /* 0から9の範囲 */varval=Math.floor(Math.random()*10); |
これで掛ける数を変えれば、整数で特定の範囲のランダムな数値が取得できます。
ちなみに、Math.ceilは切り上げ、Math.floorは切捨て、Math.roundは四捨五入です。
あとは、バナーの数を数えて毎回ランダムで○番目を表示するっていうロジックだけ。
できたのがこちら
ランダム表示するコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!--バナーの部分--> <div class="bnBox"> <p><!--ここにバナーのタグ--></p> <p><!--ここにバナーのタグ--></p> <p><!--ここにバナーのタグ--></p> <p><!--ここにバナーのタグ--></p> </div> <!--/.bnBox--> <style> /*最初はすべてのバナーを非表示にしておきます。 そうしないと全部表示されてしまいます。*/ .bnBox p {display:none;} </style> <script> $('.bnBox').ready(function(){ varcount=$(this).find('p').length;//バナーの数を数えるよ。 varnum=Math.floor(Math.random()*count);//ランダムの整数を作るよ。 $(this).find('p').eq(num).css({'display':'block'});//ランダムで取得した整数番目のバナーを表示するよ。 }); </script> |
以上です。
何かとランダムで表示したいことってこれからも出てきそうなので備忘録的な記事でした。
上のを流用すればアイキャッチのスライダーなんかもランダムでできたり、アクセスするたびにコンテンツを切り替えれたり、
んーあとはサイコロとかゲーム的な要素ですかね。
もし、複数ランダムで表示させるボックスが必要な場合は、document.readyにして、jQueryの超絶便利な.eachをゴソゴソしてあげたらいいのかなー。
若干ほかの用途が見当たりませんがもし、
プラグインでやろうとしてるけどそこまで大掛かりにはやりたくないって方はお試しを。
