sexyCycle

シンプルな紙芝居を実装できるjQueryプラグイン「sexyCycle」。
画像をクリックでなめらかにスライドしながら画像を切り替えるというシンプルなものなのですが、タイマーで自動で画像を切り替えたり、アニメーションの種類を変えたりと多機能で使えそうだったのでご紹介。

クリックやタイマーで画像を切り替え
　

実装は、div 要素の中に ul リストで画像を並べて初期化するだけです。

<div class="cycle" id="box0">
  <div class="wrap"> 
    <ul class="sexyCycle-content"> 
    <li><img width="320" height="480" src="img/1.png"></li> 
    <li><img width="320" height="480" src="img/2.png"></li> 
    <li><img width="320" height="480" src="img/3.png"></li> 
    <li><img width="320" height="480" src="img/4.png"></li> 
    </ul> 
  </div>
</div>
<script type="text/javascript">
$("#box0").sexyCycle();
</script>

sexyCycle に渡すパラメータで多彩にカスタマイズができます。

次のように初期化することで自動でアニメーション切り替えさせたりできるみたいです。

$("#box0").sexyCycle({
    speed: 500, 
    next: '.next3', 
    prev: '.prev3', 
    stop: '.stop', 
    interval: 800
});

シンプルですが１から実装しようとすると大変ですね。意外に使えそうなので覚えておくとよさそう。