エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」サンプル 画像の切り替えに飽きてきた方には今回紹介するjq-tilesは良いかもしれません。
画像をタイル状に多彩なエフェクトで切り替えてくれ、インパクトがが出てきます。

使用方法 jq-tilesからファイル一式をダウンロードします。
<link rel="stylesheet" href="jquery.tiles.css" />
<style>
.slider { width: 400px; height: 320px; } //切り替え要素の大きさ
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tiles.min.js"></script>
<script type="text/javascript">
$(function(){
$('.class名').tilesSlider({
x: 6, y: 6, // x,yの個数 maxは20
effect: 'default',
fade: true, // タイルのエフェクトをフェードさせるか
random: false, // 順番をランダムに
loop: true, //ループ
auto: true, //自動
slideSpeed: 3000, // スライド間の速度
tileSpeed: 1000, // すべてのタイルがなくなる速度
cssSpeed: 300 //cssの早さ
});
});
</script>
あとは上記で振ったclass名を表示させたい場所に記述すれば完成です。
<div class="slider">
<img src="画像パス1"/>
<img src="画像パス2"/>
<img src="画像パス3"/>
</div>

なお、effectには下記のようなものがあります。
default、simple、left、up、leftright、updown、switchlr、switchud、fliplr、flipud、reduce、360

エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」サンプル

sponsors

「エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」」をシェアする

記事作成:
記事URL:

TOP > > > エフェクト満載!画像をタイル状に切り替えるjQueryプラグイン「jq-tiles」