jQueryスライドショーの2回目は、フェードイン・フェードアウトのみから横からのスライドインへの変更（全３回）

• 2014/10/27
• 
  • JavaScript
  • jQuery

ツイート

先々週から3回に分けて行っているjQueryを使ったスライドショー作成。

前回は、単純なフェードイン・フェードアウトだけでの切り替えでしたが、今回は横からのスライドインにしてみます。

1回目の記事はこちら

まずは動作サンプルから

実際は、もう少しゆっくり切り替えますが、サンプルなので１秒で切り替えています。

1回目からの変更点

変更点は、22行目から31行目です。

1回目のフェードイン・フェードアウトを作っていないかたは、まず1回目のスライドショーを先に作ってください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var no=1;	// 操作対象の画像番号
	var max=3;	// 画像の最大数

	setInterval(function(){

		//変数noの値を元に現在表示されている画像を非表示にする
		$("#pic"+no).animate({
			"opacity":0
		});

		//変数の値を＋１して次の画像に切り替える
		no++;

		//変数noがmaxを越えていれば1に戻す
		if(no &gt; max){
			no=1;
		}

		//表示前にあらかじめ画像を右に200pxずらしておく
		$("#pic"+no).css({
			"marginLeft":"200px"
		});

		//変数noの値にを使用し画像を表示する
		$("#pic"+no).animate({
			"marginLeft":"0px",
			"opacity":1
		});

	},1000);	// ← の「1000」が実行の間隔です。

});
</script>

22行目から25行目の追加
右からのスライドインを実現するために、あらかじめマージンで200pxずらしておきます。　ちなみに左からのスライドインにする場合は、-200pxとネガティブマージンを設定してください。

29行目の追加
マージンをゼロにすることで、右にずらした画像が元の位置に戻ろうとすることでスライドインが実現します。

2回目は、これだけです！

→ 1回目の記事はこちら

その他のTechWebTipsはこちら

熊本電子ビジネス専門学校のWebデザイナーコースでは
こんなことが出来るようになります！