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

使用方法

<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>

<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:3,  //要素複数を1度に見せたい場合
		autorun_delay:500,  //遷移ディレイ速度
		direction: 'right', //遷移方向（top,bottom,left,right）
		left_arrow: '前', //左矢印のテキスト
		right_arrow: '次', //右矢印のテキスト
		speed:100, //スライド間の切り替わりスピード
		autorun:30 //要素間の遷移時間
	});	
});
</script>

.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;
}

サンプル