jQueryのスライドショーを自作しよう!(最終回/全3回)

テクニカルWebデザイン(TechWeb)

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

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

PR

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

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

jQuery

HTML5

CSS3

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

 

2回目からの追加点

CSSには3カ所追加です。

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ヵ所です。

以前の記事はこちら

その他のTechWebTipsはこちら

熊本でWebに興味あるなら
熊本電子ビジネス専門学校 ITビジネス科

 

関連記事