skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

表示領域が少なくても、いろんな要素を見せたい時があります。
そんなとき要素を上下左右にガラガラと切り替えられるjQuery flipsを利用すると便利です。

使用方法
jQuery flipsからjquery.flips.jsを、jQueryからjquery.jsをダウンロードします。
<div class="to-flips" id="id名">
<!-- ここから要素1 -->
<div class="content">
<div class="block">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- ここまで要素1 -->
<div class="content">
<div class="block">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="content">
<div class="block">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="navigation"></div>
</div>

上記のように記述したら、次にJavaScriptを記述します。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.flips.js"></script>
<script type="text/javascript">
$(function(){
$('#id名').flips({
items:n, //要素複数を1度に見せたい場合
autorun_delay:500, //遷移ディレイ速度
direction: 'right', //遷移方向（top,bottom,left,right）
left_arrow: '前', //左矢印のテキスト
right_arrow: '次', //右矢印のテキスト
speed:100, //スライド間の切り替わりスピード
autorun:30 //要素間の遷移時間
});
});
</script>

最後にCSSで調整すれば完成です。
.to-flips {
height: 250px; //切り替え場所の高さ
width: 300px; //切り替え場所の幅
}

.to-flips .content {
position: relative;
overflow: hidden;
}

.to-flips .content .block {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
display: none;
overflow: hidden;
}

ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」サンプル

記事作成：2009年11月26日

前の記事：画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」
次の記事：Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」