画像をクロスフェードさせるJavaScript「ImageFadingSlider」

画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか?
それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。

sponsors

使用方法

Image Fader jQuery plugin - wingtechからjquery.metadata.jsとjquery.imagefadingslider.jsをダウンロードします。
もちろんjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.imagefadingslider.js"></script>
<script type="text/javascript">
$(function(){
	$("#id名").imageFadingSlider({
		item_width:400,  //フェードさせる要素幅
		item_height:120, //フェードさせる要素高さ
		easing:"random", //動き(1、2、random)
		total_time:6000, //合計時間
		dist:200, //開始距離
		fading_time:2000 //フェード時間
	});
});
</script>
また指定したidにCSSで下記を記述します。

#id名 {
	overflow: hidden;
	position: relative;
}
最後に画像を書きます。

<div id="id名">
	<img src="画像パス1">
	<img src="画像パス2">
	<img src="画像パス3">
</div>

サンプル


Javascriptサンプルページ一覧
skuare.net