.net column

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

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

2020年08月07日

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

SE
スライドショーを実装できれば、ウェブサイトが一気にカッコよくなりますね!
PL
そうですね。一度自分で作っておくと、仕組みが分かるので応用も効きやすいですよ。

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

スライドショーとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SE
今までプラグインに頼っていましたが、これなら自作できそうです。
PL
今回紹介したスライドショーは必要最低限の機能なので、好みに合わせてカスタマイズも楽しんでくださいね。

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

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

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

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


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

求人一覧

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

エントリー(応募フォーム)