ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

最後のシーンにタメをもたせたスライドショー(クロスフェード)をjQueryで実装する

ひっさしぶりのブログ更新です。

仕事でTOPページのメインビジュアルをjQueryで作成する必要があったので、自身の備忘録としてエントリーします。

クライアント様のご要望は

  • iPhoneやiPadでも閲覧できるようにしたい(jQueryがいいってことだよね)
  • ストーリーをもたせたスライドショーにしたい(要は最後のシーンをタメたい)

とのことでした。

とりあえずサンプルです。

中身の解説は、前回と同様にコメントアウトで。

jquery

$(function(){
	var fadeoutSP = 600;	// 画像の切り替えスピード(フェードアウト)
	var fadeinSP = 500;		// 画像の切り替えスピード(フェードイン)
	var nextTM = 2000;		// 画像を表示している時間
	var endTM = 5000;		// 最後の画像を表示している時間(タメ)
							// (1/1000秒)

	// 【シーン1】ページ読み込み直後に表示する最初の画像
	$(window).load(function() {
		$('#view img').css({opacity:'0'});
		$('#view img#view1').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene2();},nextTM);
	});

	// 【シーン1】ループ後に表示される最初の画像
	function scene1() {
		$('#view img#view3').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view1').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene2();},nextTM);
	};

	// 【シーン2】2番目に表示される画像
	function scene2() {
		$('#view img#view1').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view2').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene3();},nextTM);
	};

	// 【シーン3】最後に表示される画像
	function scene3() {
		$('#view img#view2').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view3').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene1();},endTM);
	};
});

 

css

/* 切り替えたい画像をpositionで重ねています */

#view{
	position:relative;
	top:0;
	left:0;
	width: 300px;
	height:200px;
}
#view img {
	position:absolute;
	left:0;
	top:0;
}

 

HTML

<div id="view">
	<img src="sample1.gif" alt="" id="view1"><!-- シーン1の画像 -->
	<img src="sample2.gif" alt="" id="view2"><!-- シーン2の画像 -->
	<img src="sample3.gif" alt="" id="view3"><!-- シーン3の画像 -->
	<img src="sample_loader.gif" alt=""><!-- ローディング画像 -->
</div>

なんかスマートじゃないな~。

投稿日
2012年7月10日
カテゴリー
JavaScript
  1. blow-in さん (2013年8月12日 08:48)

    少しでもお役に立てたようで、よかったです!

  2. けめこ さん (2013年8月11日 17:44)

    お盆やらでもたもたしてましたがようやく解決しました。リンクのある画像と無い画像が混在するページを作りたくて悩んでました。

    // 【シーン1】ページ読み込み直後に表示する最初の画像
    $(window).load(function() {
    $(‘#view p’).css({opacity:’0′});
    $(‘#view p#view1′).stop().animate({opacity:’1′,zIndex:’1’},fadeinSP);
    setTimeout(function(){scene2();},nextTM);
    });

    // 【シーン1】ループ後に表示される最初の画像
    function scene1() {
    $(‘#view p#view6′).stop().animate({opacity:’0′,zIndex:’0’},fadeoutSP);
    $(‘#view p#view1′).stop().animate({opacity:’1′,zIndex:’1’},fadeinSP);
    setTimeout(function(){scene2();},nextTM);
    };

    // 【シーン2】2番目に表示される画像
    function scene2() {
    $(‘#view p#view1′).stop().animate({opacity:’0′,zIndex:’0’},fadeoutSP);
    $(‘#view p#view2′).stop().animate({opacity:’1′,zIndex:’1’},fadeinSP);
    setTimeout(function(){scene3();},nextTM);
    };

    #view p {
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    }


    「なんかスマートじゃないな~。」とおっしゃってましたが、ベタに書いて頂いたのでなんとかなりました。
    ブログなどにプラグインとして用意されてるフェードイン&アウトは私にはさっぱりわからないので今回とても助かりました。
    誠にありがとうございました。

  3. けめこ さん (2013年8月3日 13:52)

    すっごいお早いご返信ありがとうございました。ただいま取組中です。まだうまく動きませんがひとまずお礼まで。また改めて報告します。

  4. blow-in さん (2013年8月3日 12:51)

    こひらのサンプルですが、クライアントからは単に画像を切り替えるだけのご要望でしたので、リンクの設定を想定していませんでした。。。
    リンクを実装したいとなると、画像の重なりを設定する必要があります。
    以下のサンプルをリンクありに修正しましたので、ご参考までにご確認いただければとおもいます。
    https://blow-in.net/sample/sample120710/

  5. けめこ さん (2013年8月3日 12:20)

    流用させて頂きました。ありがとうございました。この画像ひとつひとつに個別のリンク先を設定したい場合はどうすればいいでしょうか?普通に画像にリンクタグを付けましたが機能しませんでした。

コメントを残す

デザイン&メディア事業blow→in
[日根野オフィス]
大阪府泉佐野市日根野3963-3-403
TEL.072-468-8786(代)
[商工会議所オフィス]
大阪府泉佐野市市場西3-2-34-306
アパレル&プリント事業DIGMO
HANDPURI
大阪府泉佐野市日根野4036-1
TEL.0120-610-322
ブランディング事業かつらぎフルーツ
和歌山県かつらぎ町東渋田325-4
TEL.090-3612-3401
飲食店事業cafeblow
大阪府泉佐野市日根野3963-3
TEL.090-5127-9187