BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

フェードイン・フェードアウトによる画像スライドショーを jQuery で簡単に

更新日:2014/09/02

画像をフェードイン・フェードアウトしながらスライドショー をするサンプルです。jQuery を利用すれば、数行のコードを追加するだけで実装できます。

サンプル

サンプルのソースです。

HTML

HTML はシンプルに画像を並べただけです。画像の数はいくつあっても動作します。環境(Androidなど)によっては画像の切り替え時に縦横比率がおかしな動作をすることがあるため、「img」を「div」で囲んでいます。

CSS

「#cover」で指定したサイズが表示部分のサイズです。中の要素はトップに揃えて重ね、「opacity」を切り替えて見せています。

JavaScript

ここでは、画像を表示している時間を5秒・画像を切り替えるスピードを3秒に設定しています。「time」と「speed」の値を変更して任意の時間に設定できます。
(「time」は setInterval に設定するミリ秒単位の数値・「speed」は css transition に設定する文字列です)

(藤崎)

FOLLOW US