切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」
画像の切り替えが面白い画像ギャラリーがあったので、ご紹介します。
Jquery Slider with transition effects (bounce and switch effect)はモザイクをランダムに散らしたような感じで画像間の切り替えをさせられます。
使用方法
Jquery Slider with transition effectsからファイル一式をダウンロードします。
<link rel="stylesheet" href="jfancytile.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.jfancytile.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$("#id名").jfancytile({
inEasing: "easeOutBounce", //インのエフェクト（easingプラグイン）
outEasing: "easeInCirc", //アウトのエフェクト（easingプラグイン）
rowCount: 5, //行数
columnCount: 10, //列数
maxTileShift: 5 //タイル移動距離
});
});
</script>
あとは画像を記述すれば完成です。
<div id="id名">
<ul>
<li><img src="画像パス" alt="title1" /></li>
<li><img src="画像パス" alt="title2" /></li>
<!-- 以下画像分 -->
</ul>
</div>
※altは記述しないとエラーになるようです。
切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」サンプル
コメントする
記事作成：2011年9月28日 09:36
