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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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