jQueryのスライドショーを自作しよう！（最終回/全3回）

2014/11/04
- JavaScript
- jQuery

jQueryスライドショーの3回目は、横からのスライドインはそのままに枠外を非表示にしてみます。前回からの追加は5ヵ所です。サクッと終わります。

▼過去の記事は↓コチラ
1回目フェードイン
 2回目スライドイン

まずは完成形の動作サンプルから

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

ｊQuery

HTML5

CSS3

※ブログのCSSが影響してるのか枠からはみ出てます（笑）HTMLで作成した分は枠に収まってましたので大丈夫かと思います。

2回目からの追加点

CSSには３カ所追加です。

2行目から4行目	画像の下の余白を排除します。
8行目から9行目	ラップ要素の高さを指定し、枠を表示します。
14行目	p要素の上下のマージンをゼロにします。

<style type="text/css">
	img{
		vertical-align: bottom;
	}
	#wrap{
		width: 200px;
		margin: 0 auto;
		height: 200px;
		border: 1px solid #ccc;
	}
	#wrap p{
		width: 200px;
		position: absolute;
		margin: 0;
	}
	#pic2,#pic3{
		opacity: 0;
	}
</style>

スクリプトへの追加は、18行目と22行目の2か所です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var no=1,max=4;

	setInterval(function(){
		$("#pic"+no).animate({
			"opacity":0
		});

		no++;

		if(no&gt;max){
			no=1;
		}

		$("#pic"+no).css({
			"display":"none",
			"marginLeft":"200px"
			});
		$("#pic"+no).animate({
			"width":"show",
			"opacity":1,
			"marginLeft":"0px"
		});

	},1000);

});
</script>

2回目からの追加はこの5ヵ所です。