[jQuery] ランダムな順番でコンテンツや写真を表示

img01

 

ページをロードするたびにコンテンツや写真の順番をランダムで表示

たまにページを更新するたびにコンテンツの順番が変わったり、表示されている写真の順番が変わったりするのを見かけますよね?
そういった事をする為には以下のScriptを記述すれば簡単に実装する事が出来ます!

//配列をシャッフル
function shuffle(a){
var i = a.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = a[--i];
a[i] = a[j];
a[j] = t;
}
return a;
}
$(document).ready(function() {

//配列に格納したクラスをランダムに割り当てる
var SfClass = [
"ランダムに割り当てたいクラス1",
"ランダムに割り当てたいクラス2",
"ランダムに割り当てたいクラス3",
"ランダムに割り当てたいクラス4"
];
var Parent = $("クラスを割り当てる要素");
SfClsCnt = SfClass.length;
shuffle(tbClass);
itmp = 0;
Parent.each(function(i, val) {
$(this).addClass(SfClass[itmp]);
if (itmp < SfClsCnt-1) {
itmp++;
}else{
itmp = 0;
shuffle(SfClass);
}
});

});

これでページを読み込む(ロード)する度に指定した要素に用意したクラスがランダムに割り当てられます。
また、もっと簡単な記述もあると思います。
良ければ試してみて下さい。
Good bye

コメントを残す

メールアドレスが公開されることはありません。