jQueryでフレーム毎に表示時間を変更できるスライドショーのプラグイン

• 2013/03/24
• 
  • jQuery

ツイート

サイトのメインビジュアルをスライド表示にした場合、最後のフレームでためを作りたい場合があります。そんな場合は、フレーム毎で表示時間を変更できる「mainVisual_slide」をカスタマイズして使ってください。

サンプルの確認とダウンロードができます。

以前、急遽必要になり作りましたが、フレーム枚数の変更時に面倒なのでバージョンアップしたいと思いつつ放置（笑）

でも、とりあえず使えます。

mainVisual_slideを使ったサンプル

このブログの記事用にアップロードしていた画像を４つ使ってサンプルを作ってみました。4枚目のWEB-LABOのロゴを長めにしています。

mainVisual_slideのダウンロードはコチラ

• ダウンロード（mainVisual_slide.zip）

使い方

mainVisual_slide.zipをダウンロードして解凍します。

HTMLの記述

	<script type="text/javascript" src="jquery-1.8.3.min.js">;</script>
	<script type="text/javascript" src="mainVisual_slide.js"></script>
	<link href="mainVisual_slide.css" rel="stylesheet" type="text/css">

HTMLのHEAD部分には、jQuery本体、mainVisual_slideのJSとCSSの読み込みを記述します。

	<div id="slide">
		<img src="mv1.jpg" id="pic1" alt="" />
		<img src="mv2.jpg" id="pic2" alt="" />
		<img src="mv3.jpg" id="pic3" alt="" />
		<img src="mv4.jpg" id="pic4" alt="" />
	</div>

img要素には、id要素で「pic1」から「pic2」「pic3」と連番を振って、ラッパー要素（親要素）には、「slide」というid名をつけます。
※画像のファイル名は、id名と合わせる必要はありません。

mainVisual_slide.jsのカスタマイズ

まずは、変数や配列へのパラメータの設定です。

	var start = 0;	//スタート時のフェードイン（しないならゼロを代入）
	var fadeoutSP	= new Array(2000,2000,2000,2000);	//フェードアウトのスピード（1枚目,2枚目,3枚目,4枚目）
	var fadeinSP	= new Array(1000,1000,1000,1000);	//フェードインのスピード（1枚目,2枚目,3枚目,4枚目）
	var dispTM		= new Array(3000,3000,3000,8000);	//表示時間（1枚目,2枚目,3枚目,4枚目）

ここで、各スライドの表示時間やフェードイン・フェードアウトの設定を行います。この時、1000が1秒間になります。5秒間表示したければ5000を設定します。

配列のdispTMが各スライドの表示時間になります。サンプルでは、1枚目から3枚目までは3秒、最後の4枚目は8秒表示するようになっています。

フェードインやフェードアウトについてもスライドごとに設定できますが、表示時間との関係もあるので試しながら使ってください。

続いて、各スライドの関数部分です。
スライドが4枚であれば変更する必要はありません。

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

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

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

	//　【シーン3】3番目に表示される画像
	function scene3() {
		$('#slide img#pic2').stop().animate({opacity:'0'},fadeoutSP[2]);
		$('#slide img#pic3').stop().animate({opacity:'1'},fadeinSP[2]);
		setTimeout(function(){scene4();},dispTM[2]);
	};

	//　【シーン4】4番目に表示される画像
	function scene4() {
		$('#slide img#pic3').stop().animate({opacity:'0'},fadeoutSP[3]);
		$('#slide img#pic4').stop().animate({opacity:'1'},fadeinSP[3]);
		setTimeout(function(){scene1();},dispTM[3]);
	};

スライドが3枚の場合
シーン4の関数部分を削除して、26行を修正します。

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

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

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

	//　【シーン3】3番目に表示される画像
	function scene3() {
		$('#slide img#pic2').stop().animate({opacity:'0'},fadeoutSP[2]);
		$('#slide img#pic3').stop().animate({opacity:'1'},fadeinSP[2]);
		setTimeout(function(){scene1();},dispTM[2]);
	};

【修正前】setTimeout(function(){scene4();},dispTM[2]);
　　↓
【修正後】setTimeout(function(){scene1();},dispTM[2]);

これにより、3枚目から1枚目に戻るようになります。

スライドが5枚の場合
まずは、パラメータ用の配列に5枚目用を追加します。
各配列の要素数が５つになるようにしてください。

	var fadeoutSP	= new Array(2000,2000,2000,2000,2000);	//フェードアウトのスピード（1枚目,2枚目,3枚目,4枚目,5枚目）
	var fadeinSP	= new Array(1000,1000,1000,1000,1000);	//フェードインのスピード（1枚目,2枚目,3枚目,4枚目,5枚目）
	var dispTM		= new Array(3000,3000,3000,3000,8000);	//表示時間（1枚目,2枚目,3枚目,4枚目,5枚目）

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

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

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

	//　【シーン3】3番目に表示される画像
	function scene3() {
		$('#slide img#pic2').stop().animate({opacity:'0'},fadeoutSP[2]);
		$('#slide img#pic3').stop().animate({opacity:'1'},fadeinSP[2]);
		setTimeout(function(){scene4();},dispTM[2]);
	};

	//　【シーン4】4番目に表示される画像
	function scene4() {
		$('#slide img#pic3').stop().animate({opacity:'0'},fadeoutSP[3]);
		$('#slide img#pic4').stop().animate({opacity:'1'},fadeinSP[3]);
		setTimeout(function(){scene5();},dispTM[3]);
	};

	//　【シーン5】5番目に表示される画像
	function scene5() {
		$('#slide img#pic4').stop().animate({opacity:'0'},fadeoutSP[4]);
		$('#slide img#pic5').stop().animate({opacity:'1'},fadeinSP[4]);
		setTimeout(function(){scene1();},dispTM[4]);
	};

【33行目修正前】setTimeout(function(){scene1();},dispTM[3]);
　　↓
【33行目修正後】setTimeout(function(){scene5();},dispTM[3]);

5枚目のスライドが追加されたので、33行目の「scene1();」を「scene5();」に変更します。

続いてシーン4の関数を丸々コピペしてシーン5用の関数を作ります。

	//　【シーン4】4番目に表示される画像
	function scene4() {
		$('#slide img#pic3').stop().animate({opacity:'0'},fadeoutSP[3]);
		$('#slide img#pic4').stop().animate({opacity:'1'},fadeinSP[3]);
		setTimeout(function(){scene1();},dispTM[3]);
	};

　↓ シーン4からシーン5へ切り替わり、シーン1へ戻るように修正します。

	//　【シーン5】5番目に表示される画像
	function scene5() {
		$('#slide img#pic4').stop().animate({opacity:'0'},fadeoutSP[4]);
		$('#slide img#pic5').stop().animate({opacity:'1'},fadeinSP[4]);
		setTimeout(function(){scene1();},dispTM[4]);
	};