複数の画像がふわっと切り替わる！スライドショーの作り方

フェイドインとフェイドアウトを繰り返して、ふわっと画像が切り替わるスライドショーを掲載

ページの上部に表示されているバナー画像が、スライドショーの形で繰り返し切り替わっていくデザインを採用したウェブサイトをよく見かけます。

スライドショーにも様々な表示効果がありますが、画像が1枚ずつ一瞬で切り替わるのではなく、次の画像が1秒程度かけてフェイドインしてくるような「ふわっと切り替わる」効果を出しているものもよく見かけます。

■ふわっと切り替わるスライドショーの活用例
例えば、2013年時点の日本郵便サイトでは、上部にある大きなバナー画像で同様の効果が使われていました。下図のように、複数のバナー画像が3秒間隔くらいでフェイドアウト・フェイドインを繰り返して、ふわっと切り替わります。
 
このような効果を使ってスライドショーを作ると、画像が切り替わっていることがよく分かって目に付きます。しかし、派手すぎる効果ではないので、煩く感じられる心配はないでしょう。

今回は、このような「複数の画像をふわっと切り替える効果を出すスライドショー」の作り方をご紹介いたします。
 

「A Simple jQuery Slideshow」スクリプトを使う

上記の効果を伴うスライドショーは、JavaScriptの有名ライブラリであるjQueryを活用すると短い記述で作成できます。今回は、「A Simple jQuery Slideshow」という名称で公開されている短いスクリプトを使う方法をご紹介いたします。

特にプラグインという形で配布されているわけではないので、直接JavaScriptソースを記述して使います。ほぼコピー＆ペーストするだけで使えますので、とても簡単です。

■スライドショーの作成サンプルページ：
実際にこのスクリプトを使って数枚の写真をスライドショーにしたサンプルページを用意しました。お使いのブラウザでアクセスして表示を確認してみて下さい。
 

• ふわっと切り替わるスライドショーサンプル1
  画像だけがフェイドアウト・フェイドインを繰り返します。
• ふわっと切り替わるスライドショーサンプル2
  画像がリンクになっており、画像下部のキャプションも含めて切り替わります。

このように、画像のみを切り替えるスライドショーだけではなく、キャプションも含めたボックス丸ごとを切り替えるスライドショーでも簡単に作れます。後者だと画像ごとにリンク先を変えられるため、商品やサービスを紹介するスライドショーを作りたい場合にも向いています。
 
それでは、次のページからjQueryを使って、ふわっと画像が切り替わるスライドショーを作る方法を見ていきましょう。