スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像をフェードインさせるスライドショーを作ってみた

sample_fadein

前回に続いてjQueryで画像のスライドを作る練習です。今回は画像が順番にフェードインするようにしてみました。

動作サンプルはこちら。

Flashでスライドショーを作ることが多いですが、これくらいならjQueryで簡単にできますね。JavaScriptのソースは以下のとおり。

$(function() {
	var target = $("#slider li");
	var speed = 4000;
	var maxnum = target.length;

	function fade(num) {
		var t = setTimeout(function() {fade(num);}, speed*2);
		$(target.get(num)).fadeIn(speed);
		num++;
		if (num == maxnum) {
			clearTimeout(t);
		}
	}

	fade(0);
});

setTimeoutの使い方でちょっと手間取りましたが、特に難しいことはしていません。これを応用すればもう少し複雑なスライドショーも作れそう。

関連するエントリー
jQueryで画像のスライダーを作ってみた

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。