skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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「ImageFadingSlider」サンプル

記事作成：2009年11月24日

前の記事：独自の右クリックメニューを導入できるJavaScript「a jQuery context menu plugin」
次の記事：画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」