スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。
JavaScriptライブラリjQueryプラグインの「Sliced Image Slider」を使用すると、スライスされた画像が上下左右から現れるようなエフェクトが可能です。

使用方法

Sliced Image Sliderからファイル一式をダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slices.js"></script>
<script>
$(document).ready(function() {
   $("#id名").slicer();
});
</script>

あとは上記id内に画像を記述すれば完成です。


<div id="id名">
   <ul>
      <li><img src="画像パス1" /></li>
      <li><img src="画像パス2" /></li>
      <li><img src="画像パス3" /></li>
    </ul>
</div>

また表示する画像の幅高さに応じて以下のようにCSSを記述します。


<style>
#id名{
  height:265px;  //画像の高さ
  width:500px; //画像の幅
  overflow:hidden;
  position:relative;
}
#id名 ul{
  margin:0;
  padding:0;
}
#id名 ul li{
  float:left;
  list-style-type:none;
  margin:0;
  padding:0;
}
img {
  border:none;
  margin:0;
  padding:0;
}
</style>

またオプションは以下のようなものがあります。


   $("#id名").slicer({
      direction: 'topDown', //移動方向 bottomUp,leftRight,rightLeft
      duration: 1000, //スライド移動時間
      sliceDelay: 100, //スライス移動時間
      removeSliceDirection: 'bottomUp',  //スライス削除方向
      numberOfSlices: 10 //スライス枚数
    });

サンプル

Javascriptサンプルページ一覧

skuare.net