今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 簡単実装!シンプルなアコーディオンメニュー「Accordion」
  4. テーブルのヘッダー(th)がついてくる「Mr.StickyTableHeaders」

複数の画像をクロスフェードで切り替える「Image Rotator」

スポンサーリンク

複数の画像をクロスフェードで切り替えるプラグイン「Image Rotator」を紹介します。

jQueryプラグイン「Image Rotator」

クロスフェードとは、フェードアウトとフェードインをつなげた映像や音楽に使用される技法のひとつです。

このプラグインでは、ひとつの画像が消えていく(フェードアウト)とともにもうひとつの画像が表示させる(フェードイン)ことができます。

オプションでは画像の表示時間、フェードの時間を指定することができるので、サイトにおもしろい効果を取り入れることができますね。

スポンサーリンク

デモで複数画像のクロスフェードを堪能してください。

「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

スポンサーリンク

関連記事(一部広告含む)