解 説
複数の画像をクロスフェードで切り替え表示する方法をご紹介します。スライダー系のライブラリを読み込んで設定するよりも簡単に、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を読み込みます
// 以下のコードを記述します
$(function(){
var setImg = '#viewer';
var fadeSpeed = 1000;
var switchDelay = 3000;
$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
jQueryは予め読み込んでおきましょう。
「setImg」にimgタグを囲う要素のidまたはclassを指定します。
「fadeSpeed」にはフェードするスピードを指定します。
「switchDelay」には画像が切り替える時間を指定します。
setInterval()を使用し、指定した時間で繰り返し処理を行います。
これで完成です。
フェードで切り替え表示したい画像のimgタグをjQueryで指定する要素の中に記述します。
画像を追加したい場合は、imgタグを追加していきます。