ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

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

複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーをWeb上で作る方法を解説。画像を掲載する短いHTMLに、配置と重なり順序を調整するCSSを加え、jQueryでスライドショーを制御することで簡単に作れます。画像はリンクにもできるため、クリックすると詳細ページへ飛ぶスライドショーを作ることもでき、シンプルながら活用範囲の広いスライドショーになります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

次の画像がフェイドインしてくる形で「ふわっと」切り替わるスライドショー

次の画像がフェイドインしてくる形で「ふわっと」切り替わるスライドショー

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

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

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

複数のバナー画像が数秒間隔でフェイドインを繰り返して、ふわっと切り替わるスライドショーになっている


このような効果を使ってスライドショーを作ると、画像が切り替わっていることがよく分かって目に付きます。しかし、派手すぎる効果ではないので、煩く感じられる心配はないでしょう。

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

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

「A Simple jQuery Slideshow」スクリプトの公開サイト

「A Simple jQuery Slideshow」スクリプトの公開サイト

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

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

 
スライドショーの作成サンプルページ:
実際にこのスクリプトを使って数枚の写真をスライドショーにしたサンプルページを用意しました。お使いのブラウザでアクセスして表示を確認してみて下さい。
 
このように、画像のみを切り替えるスライドショーだけではなく、キャプションも含めたボックス丸ごとを切り替えるスライドショーでも簡単に作れます。後者だと画像ごとにリンク先を変えられるため、商品やサービスを紹介するスライドショーを作りたい場合にも向いています。
 
指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例

指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例


それでは、次のページからjQueryを使って、ふわっと画像が切り替わるスライドショーを作る方法を見ていきましょう。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます