手軽に背景画像を全画面表示にするjQueryプラグイン「Backstretch」をよく使ってます。
BODYでもブロックレベルでも使えて、スライドショーにもなるので重宝します。
$.backstretch([ "/img/xxx.jpg", "/img/xxx.jpg", "/img/xxx.jpg" ], {duration: 5000, fade: 1000});
画像ファイルは配列で記述するので、この配列をランダムにして返せば、アクセスごとに順番がランダムになります。
まずは関数部分。
function slideRdm(rdm){ var obj = []; for (var i = 0, l = rdm.length - 1; i <= l; i++){ var num = Math.floor(Math.random()*(l-i)); obj.push(rdm[num]); rdm.splice(num, 1); } return obj; }
画像ファイルのパスを関数に渡す。
var rdm = ["/img/xxx.jpg", "/img/xxx.jpg", "/img/xxx.jpg"]; rdm = slideRdm(rdm);
この配列をスライドショーに。
$(function(){ $.backstretch([rdm, {duration: 5000, fade: 1000}); )};
参考:『配列をランダムに並べ替える関数を作ってみた【Javascrip/PHP】』
MUUMV http://muumv.com/random/