refirio.org

HTML

HTMLは以下のとおりです。ul と li で画像をマークアップしています。後ほどクラス名をもとにjQueryのプラグインを反映させるため、class="slide" を設定しています。

<ul class="slide">
  <li><img src="picture1.jpg" /></li>
  <li><img src="picture2.jpg" /></li>
  <li><img src="picture3.jpg" /></li>
</ul>

CSS

CSSは以下のとおりです。ul と li でマークアップした画像は縦に並んで表示されますが、position: absolute; によって重ねて表示させます。（それ以外はレイアウトを調整するための設定です。）この重ね順をjQueryで切り替えることによって、スライドショーを実現します。

<style>
ul.slide {
  overflow: hidden;
  width: 400px;
  height: 300px;
  margin: 0;
}
ul.slide li {
  position: absolute;
  list-style: none;
}
</style>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.slide.js を読み込みます。jquery.slide.js は、オプションとしてinterval（画像を切り替える間隔）とspeed（切り替えにかける時間）をミリ秒で指定すると、スライドショーを作成してくれるjQueryプラグインです。

<script src="../jquery.js"></script>
<script src="jquery.slide.js"></script>
<script>
$(document).ready(function() {
  $('.slide').slide({
    interval: 3000, //3秒ごとに切り替え
    speed: 2000     //2秒かけて切り替え
  });
});
</script>

プラグイン

jquery.slide.js の内容は以下のとおりです。

(function($) {
  $.fn.slide = function(option) {
    var settings = $.extend({
      interval: 1000,
      speed: 1000
    }, option);

    $(this).html($(this).children().get().reverse());
    fade(this, settings.interval, settings.speed);

    return this;
  };

  var fade = function(target, interval, speed) {
    $(target).children().last().delay(interval).fadeOut(speed, function() {
      $(this).prependTo(target).show();
      fade(target, interval, speed);
    })
  };
})(jQuery);

まずは

$.fn.slide = function(option) {
  var settings = $.extend({
    interval: 1000,
    speed: 1000
  }, option);

の部分でオプションを受け取ります。intervalとspeedの初期値は、それぞれ1000ミリ秒（1秒）としています。

$(this).html($(this).children().get().reverse());

画像の順番を入れ替えるための準備です。先ほどCSSで画像を重ねましたが、最後に重ねたものが一番上に来ていました。これを逆順にすることにより、重なり順が逆になった画像が画面に表示されます。

fade(this, settings.interval, settings.speed);

fade() は自作の関数で、「操作対象」「画像を切り替える間隔」「切り替えにかける時間」を渡すと、実際に画像を切り替えます。

var fade = function(target, interval, speed) {
  $(target).children().last().delay(interval).fadeOut(speed, function() {
    $(this).prependTo(target).show();
    fade(target, interval, speed);
  })
};

実際に画像を切り替える関数の内部です。外部から呼び出す必要が無いので、privateなメソッドとして定義しています。

フェードアウトは、jQueryに実装されている fadeOut() で行うことができます。引数には、フェードアウトにかける時間とフェードアウトが完了したときに実行する処理を設定できます。例えば

$('div#test').fadeOut(1000, function() { alert('complete'); });

と書くと、1秒かけて要素をフェードアウトさせ、完了時にアラートで「complete」と表示します。

今回はフェードアウトが完了すると、最後の要素（一番上に重ねられている画像）を先頭（一番下）に移動させて表示します。その後、さらに fade() を呼び出すことにより、同じ処理が実行され続けます。これにより、画像が順番に切り替わり続けるようになります。