IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作る

IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作るサンプル 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。
これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。
頭を悩ませるIE6も3Dエフェクト以外は対応しています。

使用方法 box-sliderからファイル一式をダウンロード。
切り替えたい画像を下記の通り記述します。 <div class="slider-viewport">
<div id="id名">
<figure>
<img src="画像パス1">
</figure>
<figure>
<img src="画像パス2">
</figure>
<figure>
<img src="画像パス3">
</figure>
</div>
</div>

あとはJavaScriptを</body>上に記述すれば完成です。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="box-slider.jquery.js"></script>
<script type="text/javascript">
$(function () {
$('#id名').boxSlider({
  //オプション
autoScroll: true, //自動スクロール
effect: 'scrollVert3d' //エフェクト設定(scrollVert3d、scrollHorz3d、tile3d、tilescrollVert、scrollHorz、blindLeft、blindDown、fadeがあります。)
});
});
</script>
//下記には上記で設定したエフェクトに対応したものを読み込んでください。
<script src="effects/box-slider-fx-scroll-3d.js"></script>

なお、画像サイズにあわせて以下のようにCSSを記述します。
.slider-viewport { width: 画像の横幅px; height: 画像の高さpx; overflow: hidden }
IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作るサンプル

sponsors

「IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作る」をシェアする

記事作成:
記事URL:

TOP > > > IE6もOK!jQueryプラグインでぐりんぐりんする画像切り替えを作る