スライドショーをランダムにする・その2

手軽に背景画像を全画面表示にするjQueryプラグイン「Backstretch」をよく使ってます。
BODYでもブロックレベルでも使えて、スライドショーにもなるので重宝します。

Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

$.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/