スライドショーを使う案件が非常に多く、
その都度最適なプラグインなり、
自作(正確にはどなたかのお知恵をお借りして)するのですが、
一番手軽に使っているのはSLIDESJSです。
おなじみですね。
素直にマークアップした後に、
「アクセスするたびに画像をランダムにしてほしい」という要望が来まして、
他のプラグインに変えるか迷いましたが、
HTMLがシンプルな構造なので、
スライドを始める前に、スライドの中身をランダムにしてしまおう、
という結論になりました。
var arr = []; $("#slides div").each(function() { arr.push($(this).html()); }); arr.sort(function() { return Math.random() - Math.random(); }); $("#slides").empty(); for(i=0; i < arr.length; i++) { $("#slides").append('<div>' + arr[i] + '</div>'); }; setTimeout(function(){ $(function() { $('#slides').slidesjs({ width: 980, height: 440, navigation: false, play: { auto: true, effect: "fade", interval: 7000 }, pagination: { effect: "fade" }, effect: { fade: { speed: 1000 } } }); }); }, 700);
参考:『要素をランダムに並び替える』FINE×3 http://www.finefinefine.jp/web/kiji2068/