Web-Gimmick Web制作と知識のメモ帳

jQueryでブラウザ読み込み毎にランダムで違う要素を表示する方法。

2015/09/24

jQuery

たまにありますね、ランダム表示設定。
バナーをランダムに表示したいとか、複数の企業が関係してる場合とかに多いかな。
広告の位置や順番の重要性はいわずもがななので当然です。
表示位置や順番がランダムに変わるようにしておけば気持ちよく話がすすみますね。

今回はブラウザでの読み込み毎にランダムで要素を表示する方法です。

jQueryでブラウザ読み込み毎にランダムで違う要素を表示する方法

ランダム表示のデモ

デモをつくってみました。
再読み込みするとランダムに順番が切り替わります。
デモではテキストにしてますが、画像にしてもらっても
<li>内に複数要素をいれても大丈夫。

ランダム表示のデモ

ランダム表示の設定方法

javascript

jQueryがいるのでダウンロードする。
ランダム設定のスクリプトは以下。

jQuery(function($) {
$.fn.extend({
	random : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
				$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});
$(function(){
	$("[random]").each(function() {
		$(this).random($(this).attr("random"));
	});
});
});

HTML

<ul random="3" id="random" class="clr">
<!-- random="3"の数値が表示させる数 clrはclearfixです-->
	<li>バナー1</li>
	<li>バナー2</li>
	<li>バナー3</li>
	<li>バナー4</li>
	<li>バナー5</li>
	<li>バナー6</li>
	<li>バナー7</li>
	<li>バナー8</li>
</ul>

CSS

/* RANDOM */
#random{
	width: 390px;
	height: 115px;
	overflow: hidden;
		/*heightとoverflowはjsの読込み遅延で一瞬全て表示される場合の対処*/
	margin: 100px;
}
#random li{
	width: 120px;
	background-color: #ffeeee;
	text-align: center;
	padding: 50px 0;
	margin-left:10px;
	float: left;
}

ランダム表示の簡単な説明

簡単に言うと<ul random=”3″>内の<li>〜</li>がランダムに3個選択されて表示されるようになってます。
<li>〜</li>内には要素を沢山入れることも出来るし自由に変更可能です。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.