解 説
複数の画像をクロスフェードで切り替え表示する方法をご紹介します。スライダー系のライブラリを読み込んで設定するよりも簡単に、jQueryを使って設定する方法です。 当サイトのトップページ「WORKS」にもこの方法でクロスフェード画像を配置しています。
1htmlマークアップは以下の通り
2CSSは以下の通りです。
#viewer {
margin: 0 auto;
width: 600px;
height: 250px;
text-align: left;
overflow: hidden;
position: relative;
}
#viewer img {
top: 0;
left: 0;
position: absolute;
}
widthとheightで画像サイズを指定して、
position を使い、全ての画像を重ねます。
3javascriptを以下の通り記述すれば完成です。
// 予めjQueryを読み込みます // 以下のコードを記述します
jQueryは予め読み込んでおきましょう。
「setImg」にimgタグを囲う要素のidまたはclassを指定します。
「fadeSpeed」にはフェードするスピードを指定します。
「switchDelay」には画像が切り替える時間を指定します。
setInterval()を使用し、指定した時間で繰り返し処理を行います。
これで完成です。
フェードで切り替え表示したい画像のimgタグをjQueryで指定する要素の中に記述します。
画像を追加したい場合は、imgタグを追加していきます。