jQueryを使ってWebサイトのスライドショーを自作する方法

.NET開発者のためのブログメディア

jQueryでは、スライドショーを作成するためのプラグインがたくさん用意されています。プラグインを活用すれば簡単にスライドショーを実装できるのですが、ここではあえて「プラグインを使わずに」自作でスライドショーを作成する方法を紹介していきます。カスタマイズもできるので、ぜひ参考にしてみてください。

SE: スライドショーを実装できれば、ウェブサイトが一気にカッコよくなりますね！

PL: そうですね。一度自分で作っておくと、仕組みが分かるので応用も効きやすいですよ。

実行環境
・macOS Catalina 10.15.5
・Repl.it

スライドショーとは

多くのウェブサイトで使われているスライドショーですが、改めてどういったものか把握しておきましょう。

スライドショーとは、一言でいうと「複数の画像を順番に表示していく機能」です。スライドショーには、一定時間が経つと勝手に画像が切り替わるタイプと、ユーザーが何かアクション（ボタンのクリックなど）を起こすことで画像が切り替わるタイプがあります。

今回は、前者を実装していきます。

基本のスライドショーを自作しよう

さっそく、スライドショーを自作していきましょう。
ここでは以下の流れでスライドショーを作成していきます。

すべてのスライド（画像）を重ねて非表示にする
使用メソッド：find()
1番目のスライドをフェードインで表示
使用メソッド：eq() / fadeIn()
一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示
使用メソッド：eq() / fadeIn() / fadeOut()
3を繰り返す
使用メソッド：each()

では、それぞれ解説していきます。

1. 全てのスライド（画像）を重ねて非表示にする

スライドショーで使用する画像は、実は全て重なっています。重なった画像の表示・非表示を切り替えることで、スライドしているように見せているのです。

コードは以下のようになります。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>
 <body>
   <script type="text/javascript" src="script.js"></script>
   <div class="slide">
     <!--画像を用意-->
     <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_1280.jpg" width="720" height="460"/>
     <img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_1280.jpg" width="720" height="460"/>
     <img src="https://cdn.pixabay.com/photo/2014/05/07/06/44/animal-339400_1280.jpg" width="720" height="460"/>
   </div>
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

.slide {
 position: relative; /* 親要素にrelativeを指定 */
}

.slide img {
 position: absolute; /* absoluteで画像を重ねる */
 display: none; /* 画像を非表示に非表示 */
}

.slide {

position: relative; /* 親要素にrelativeを指定 */

}

.slide img {

position: absolute; /* absoluteで画像を重ねる */

display: none; /* 画像を非表示に非表示 */

}

これで、画像を重ねて非表示にすることができました。

2. 1番目のスライドをフェードインで表示

次に、1番目のスライド（画像）を表示していきましょう。動的な処理なので、ここからはjQueryの出番です。

$(function() {
 $('.slide').each(function() {
   // スライド（画像）の数を取得
   var $slides = $(this).find('img'),
       slideNum = $slides.length,
       idx = 0; // 何番目か

   // idx番目目の画像をフェードイン
   $(".slide img").eq(idx).fadeIn();
 })
})

$(function() {

$('.slide').each(function() {

// スライド（画像）の数を取得

var $slides = $(this).find('img'),

slideNum = $slides.length,

idx = 0; // 何番目か

// idx番目目の画像をフェードイン

$(".slide img").eq(idx).fadeIn();

})

「find」メソッドで画像の数を取得し、idx番目（最初は0番目）の画像をフェードインで表示しています。

3. 一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示

1枚目（0番目）の画像を表示したあとは、一定時間経つごとに画像を切り替えていきます。
まずは、現在のスライドをフェードアウトし、次のスライドをフェードインする処理を書いていきましょう。

// 次のスライドを表示するメソッド
function dispNextSlide() {
  var nextIdx = currentIdx + 1;

  // 最後のスライドの場合ははじめに戻る
  if (nextIdx > (slideNum - 1)) {
    nextIdx = 0
  }

  // 現在のスライドをフェードアウト
  $(".slide img").eq(currentIdx).fadeOut();

  // 次のスライドをフェードイン
  $(".slide img").eq(nextIdx).fadeIn();

  // インデックスを更新
  currentIdx = nextIdx;
}

// 次のスライドを表示するメソッド

function dispNextSlide() {

var nextIdx = currentIdx + 1;

// 最後のスライドの場合ははじめに戻る

if (nextIdx > (slideNum - 1)) {

nextIdx = 0

}

// 現在のスライドをフェードアウト

$(".slide img").eq(currentIdx).fadeOut();

// 次のスライドをフェードイン

$(".slide img").eq(nextIdx).fadeIn();

// インデックスを更新

currentIdx = nextIdx;

}

このメソッドを定期的に実行できるようにします。

// 3秒後に次のスライドを表示
setTimeout(dispNextSlide, 3000);

1 2	// 3秒後に次のスライドを表示 setTimeout(dispNextSlide, 3000);

ここまでで全ての処理が記述できました。
全体のコードは次のようになります。

$(function() {
 $('.slide').each(function() {
   // スライド（画像）の数を取得
   var $slides = $(this).find('img'),
       slideNum = $slides.length,
       currentIdx = 0; // 何番目か

   // 最初の画像をフェードイン
   $(".slide img").eq(currentIdx).fadeIn();

   // 3秒後に次のスライドを表示
   setTimeout(dispNextSlide, 3000);

   // 次のスライドを表示するメソッド
   function dispNextSlide() {
     var nextIdx = currentIdx + 1;

     // 最後のスライドの場合ははじめに戻る
     if (nextIdx > (slideNum - 1)) {
       nextIdx = 0
     }

     // 現在のスライドをフェードアウト
     $(".slide img").eq(currentIdx).fadeOut();

     // 次のスライドをフェードイン
     $(".slide img").eq(nextIdx).fadeIn();

     // インデックスを更新
     currentIdx = nextIdx;
   }
 })
})

$(function() {

$('.slide').each(function() {

// スライド（画像）の数を取得

var $slides = $(this).find('img'),

slideNum = $slides.length,

currentIdx = 0; // 何番目か

// 最初の画像をフェードイン

$(".slide img").eq(currentIdx).fadeIn();

// 3秒後に次のスライドを表示

setTimeout(dispNextSlide, 3000);

// 次のスライドを表示するメソッド

function dispNextSlide() {

var nextIdx = currentIdx + 1;

// 最後のスライドの場合ははじめに戻る

if (nextIdx > (slideNum - 1)) {

nextIdx = 0

}

// 現在のスライドをフェードアウト

$(".slide img").eq(currentIdx).fadeOut();

// 次のスライドをフェードイン

$(".slide img").eq(nextIdx).fadeIn();

// インデックスを更新

currentIdx = nextIdx;

}

})

SE: 今までプラグインに頼っていましたが、これなら自作できそうです。

PL: 今回紹介したスライドショーは必要最低限の機能なので、好みに合わせてカスタマイズも楽しんでくださいね。

スライドショーでレベルの高いWebサイトを！

jQueryでは、自作でも短いコードでさくっとスライドショーを作成することができます。スライドショーがあるだけで、ウェブサイトのデザイン性が一気に上がるため、ぜひ活用してかっこいいウェブサイトに仕上げてみてください。

参考文献
株式会社シフトブレイン．jQuery最高の教科書．p.135〜137

>>>jQueryの案件を探すならFEnet .NET Navi

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）