シンプルなクロスフェードスライドショーの作り方【jQuery】

JavaScript

jQueryを使ってプラグインを使わずに、クロスフェードで切り替わるスライドショーの作り方を解説していきます。

背景画像を流しっぱなしにするときなどに使えると思います。

それでは早速、コードを解説していきましょう。

スポンサーリンク

クロスフェードの作り方 HTML編

<div id="viewer">
  <img src="./images/main1.jpg">
  <img src="./images/main2.jpg">
  <img src="./images/main3.jpg">
  <img src="./images/main4.jpg">
  <img src="./images/main5.jpg">
</div>

viewer IDの中に表示したい画像を挿入しましょう。

クロスフェードの作り方 CSS編

#viewer > img {
	width: 100%;
	position: absolute;
	z-index:-2;

}

widthで画像の幅を画面いっぱいにしています。

position: absoluteとz-index:-2は画像をそのレイヤーの位置に重ねている状態を作るために書いています。

クロスフェードの作り方 jQuery編

<script type="text/javascript">
    $(function(){
        var setImg = '#viewer';
        var fadeSpeed = 1000;
        var switchDelay = 3000;
     
        $(setImg).children('img').css({opacity:'0'});
        $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'-1'},fadeSpeed);
     
        setInterval(function(){
            $(setImg + ' :first-child').animate({opacity:'0',zIndex:'-2'},fadeSpeed).next('img').animate({opacity:'1',zIndex:'-1'},fadeSpeed).end().appendTo(setImg);
        },switchDelay);
    });
</script>

4,5行目でフェードにかかる時間と画像を表示する時間を設定しています。

7,8行目は初回のロード時のための処理です。
一度画像を全て透明にしておき、その次に一番最初の画像だけ、透過度を下げつつ、上層のレイヤーに移して画像を表示させます。

10~13行目は繰り返し処理になります。
ロードした時の処理で、1番最初の画像は表示されているので、透明度を上げつつ下層のレイヤーに移動させます。
そして同時にその次の画像の透過度を下げつつ、上層のレイヤーに移して画像を表示させます。
最後に画像を挿入して終了です。

今回は以上になります。
最後まで見てくださって、ありがとうございました。

タイトルとURLをコピーしました