もうFLASHはいらない!?画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」

FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。
でもそれFLASHじゃなくてもよくない?
JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。
もうFLASHはいらない!?画像切替えJavaScript「jQuery

使用方法
jQuery "Feature Carousel" plug-in からファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="featureCarousel.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.featureCarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").featureCarousel({
autoPlay:1, //自動再生
animationEasing: 'easeOutQuart' //easing.jsが必要
});
});
</script>

上記記述後、下記の通り画像とキャプションを記述すれば完成です。
<div id="id名">
<!-- ここから画像1枚目 -->
<div class="feature">
<a href="#"><img src="画像パス"></a>
<div>
<p>キャプション</p>
</div>
</div>
<!-- ここまで画像1枚目 -->
<!-- 以後、画像分繰り返し -->
</div>

また最低限のオプションとして例示していますが、以下のように多くのオプションがあります。

  • largeFeatureWidth
  • largeFeatureHeight
  • smallFeatureWidth
  • smallFeatureHeight
  • topPadding
  • sidePadding
  • startingFeature
  • carouselSpeed
  • autoPlay
  • counterStyle
  • preload
  • displayCutoff
  • animationEasing

これらオプションとeasingを駆使することでFLASHに負けないものが出来上がるのではないでしょうか。

もうFLASHはいらない!?画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」サンプル

sponsors

「もうFLASHはいらない!?画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」」をシェアする

記事作成:
記事URL:

TOP > > > もうFLASHはいらない!?画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」