フェードイン・フェードアウトで切り替わる画像スライドショーをjQueryで作る

今回は画像をフェードイン・フェードアウトで切り替えるjQueryのスライドショーの作り方を紹介します。

 

HTML

<div id="cover">
    <div><img src="demo-pic-1.jpg"></div>
    <div><img src="demo-pic-2.jpg"></div>
    <div><img src="demo-pic-3.jpg"></div>
    <div><img src="demo-pic-4.jpg"></div>
    <div><img src="demo-pic-5.jpg"></div>
</div>

 

HTMLは画像をdivで囲って並べただのシンプルな作りです。

見るデバイスによっては画像の比率がおかしくなる可能性があるので、imgをdivで囲っておくのがいいでしょう。

 

CSS

#cover {
width: 400px;
height: 250px;
position: relative;
overflow: hidden;
}

#cover>div {
position: absolute;
top: 0;
opacity: 0;
}

 

#coverはスライドショーの表示部分です。中のdivをposition: absoluteを指定して全て重ねておきます。これをopacityで透過させることでフェードイン・フェードアウトできるようにします。

 

jQuery

 

(function($) {
  var fadeInOut = function ($element) {
    var $children = $element.children(),
      current = 0,
      time = 5000,
      speed = '3s';

        $children.css({ transition: speed })
          .eq(current).css({ opacity: '1' });

        setInterval(function () {
          $children.eq(current).css({ opacity: '0' });
          current = current === $children.length - 1 ? 0 : current += 1;
          $children.eq(current).css({ opacity: '1' });
        }, time);
      };
      fadeInOut($('#cover'));
})(jQuery);

 

ここでは画像を表示している時間は5秒、画像を切り替えるスピードは3秒にしています。これらはtimeとspeedを変更することで調整可能です。

setInterval()を使ってtime秒ごとにfunctionの処理を行います。

処理内容はまずcurrent番目の画像を透過したらcurrentに+1し、そのcurrent番目の画像をopacity: 1で表示します。これを繰り返しています。

 

処理内容はそれほど複雑じゃないので、実装は難しくないと思います。

自分なりにいいコードがかけるように色々試してみましょう。