複数の画像をクロスフェードで切り替える「Image Rotator」
当ページのリンクには広告が含まれています。
スポンサーリンク
複数の画像をクロスフェードで切り替えるプラグイン「Image Rotator」を紹介します。
jQueryプラグイン「Image Rotator」
クロスフェードとは、フェードアウトとフェードインをつなげた映像や音楽に使用される技法のひとつです。
このプラグインでは、ひとつの画像が消えていく（フェードアウト）とともにもうひとつの画像が表示させる（フェードイン）ことができます。
オプションでは画像の表示時間、フェードの時間を指定することができるので、サイトにおもしろい効果を取り入れることができますね。
スポンサーリンク
デモで複数画像のクロスフェードを堪能してください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="QuickSearchのデモでーす。">
<title>Image Rotator - jQueryプラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="imageRotator.js"></script>
<script>
$(document).ready(function () {
var $imageDiv = $("#imageRotator");
var $imageRotator = $imageDiv.imageRotator({
imageTime: 3000,
fadeTime: 2000
});
$imageRotator.start();
});
</script>
<style>
#imageRotator img {
position: absolute;
}
</style>
</head>
<body>
<h1>Image Rotatorのデモでーす。</h1>
<div id="imageRotator">
<img src="images/red.png">
<img src="images/orange.png">
<img src="images/yellow.png">
<img src="images/green.png">
<img src="images/blue.png">
<img src="images/indigo.png">
<img src="images/purple.png">
</div>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» Image Rotator
スポンサーリンク