【jQuery】でスライドショーを自作してみる

jQueryではすでに素晴らしいスライドショーのプラグインが数多くありますが、それをあえて自作してみます。

考え方

画像をリストタグで並べる
画像を同じ場所に重ねて表示させる
画像をz-indexを使ってレイヤー別にする
画像を一番上の表示されているものからフェードアウト
最後の画像がフェードアウトする前(つまり一つ手前)ではじめにあった画像を最後に移動させ、表示させておく
もとの最後の画像がフェードアウトした時に、はじめの画像を前面に移動させ、後ろにある画像をすべて再表示させる

実装

1．画像をリストタグで並べる

//HTML
<div class="slideShow">
  <ul>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
  </ul>
</div>

2．画像を同じ場所に重ねて表示させる

/* css */
.slideShow li{
  position: absolute;
  list-style: none;
}

3．画像をz-indexを使ってレイヤー別にする

こちらはjQueryで設定します。はじめにリストタグがいくつかを判別します。次に一番上にくる画像にz-indexの値を1000にします。(適当)そこからfor文で他の画像に1ずつ減らした値を入れていきます。

var len = $('.slideShow').find('li').length;
var idx = 1000;	
for(var i=1;i<=len;i++){
  $('.slideShow li:nth-child('+i+')').css('z-index', idx);
  idx--;
}

4．画像を一番上の表示されているものからフェードアウト

一定時間が過ぎたらフェードアウトしていく処理をjavaScriptのsetIntervalで実装してみます。今回は5000ミリ秒。

setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000)
}, 5000);

5．最後の画像がフェードアウトする前で、はじめにあった画像を最後に移動させる

画像をフェードアウトさせると同時にその下の画像がでてきますので、最後の画像が消える前に、次の画像を用意しておく必要があります。最後の次の画像、つまりはじめの画像を用意します。

今回は4枚の画像を使用しますので、4枚目が消える前に1枚目の画像のz-index値を996( 1000-4)にして用意しておきます。

cnt = 1;
setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
    cnt++;
    if(cnt == len-1){ // 最後から一つ手前の画像になったら処理
      $('.slide li:nth-child(1)').css('z-index', 1000-len).show();
    }		
  });
}, 5000);

6．もとの最後の画像がフェードアウトした時に、はじめの画像を前面に移動させる

z-indexを初期値に戻して、すべての画像を表示させる(画像の後ろで)

cnt = 1;
setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
    cnt++;
    if(cnt == len-1){ // 最後から一つ手前の画像になったら処理
      $('.slide li:nth-child(1)').css('z-index', 1000-len).show();
    }else if(cnt > len){
      cnt = 1; // 初期値に戻す
      for(var i=1;i<=len;i++){ //最後の画像になったら処理
        $('.slide li:nth-child('+i+')').css('z-index', idx).show();
        idx--;
      }		
  });
}, 5000);

まとめ

最後にfunctionでひとまとめにしてみました。

function(){
  var cnt = 1;
  var len = $('.slide').find('li').length;
  var idx = 1000;	
    for(var i=1;i<=len;i++){
      $('.slide li:nth-child('+i+')').css('z-index', idx);
        idx--;
    }
  setInterval(function(){
    var idx = 1000;
    $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
      cnt++;
      if(cnt == len-1){
        $('.slide li:nth-child(1)').css('z-index', 1000-len).show();		
      }else if(cnt > len){
        cnt = 1;
        for(var i=1;i<=len;i++){
          $('.slide li:nth-child('+i+')').css('z-index', idx).show();
          idx--;
	}
      }							
    });
  }, 5000);	
})();

宿題ぶろぐ（Y）

気付いたこととか、発見しちゃったこととか