[ プログラミング ] 特定の時間周期で画像を切り替えるjQueryスクリプト

W3Qで、以下のような質問があったので、jQueryで作ってみました。

ただ、どういう条件で画像を切り替えるかわからなかったので(順番なのかランダムなのかなど)、順番に表示するように作ってみました。ランダムはうまくできませんでした。リロード毎に表示するのとかは簡単なのですが、0時ちょうどにランダムに切り替える方法を思いつきませんでした…。

質問では24時間おきになっていますが、動作確認が難しいのでデモでは5秒おきにしています。以下のソースコードでは24時間おきにしています。

DOMO

最低限のソースコードは以下のとおりです。

HTML

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>サンプル</title>
<script type="text/javascript">
$(function() {
   $('#headImage ul').imageChange();
});
</script>
</head>
<body>
   <div id="headImage">
      <ul>
         <li><img src="images/icatch01.jpg" alt="" /></li>
         <li><img src="images/icatch02.jpg" alt="" /></li>
         <li><img src="images/icatch03.jpg" alt="" /></li>
         <li><img src="images/icatch04.jpg" alt="" /></li>
      </ul>
   </div><!-- /#headImage -->
</body>
</html>

Java Script

$.fn.imageChange = function(config) {
   // オプション
   var options = $.extend({
      time : 24*60*60*1000 // 切り替える周期(ミリ秒で計算)(24時間おきに画像切替)
   }, config);

   return this.each(function() {
      // 指定した要素の子要素を取得する
      var element = $(this).children();

      // 全ての要素を非表示にする
      $(element).hide();

      // 要素の数を取得する
      var number = $(element).length;

      // 現在の時間を取得する
      var getTime = $.now();

      // 要素を選択する
      var select = Math.floor(getTime / options.time) % number;

      // 要素を表示する
      $(element[select]).show();
   });
};

CSS

#headImage {
   width:740px;
   height:200px;
   overflow:hidden;
   position:relative;
   list-style:none;
}

#headImage ul {
   list-style:none;
   margin:0;
   padding:0;
}

#headImage li {
   position:absolute;
   background:#fff;
}

時間の周期も自由に変更できます。この場合は、HTMLファイルのスクリプトを呼び出す所で、

HTML

$(function() {
   $('#headImage ul').imageChange({time : 12*60*60*1000});
});

といったように、ミリ秒で時間を設定してください。

参考サイト