もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」
FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。
でもそれFLASHじゃなくてもよくない？
JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。
使用方法
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 」サンプル
コメントする
記事作成：2010年4月20日 10:15
