もう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
サンプル
This is some information that can go along with an image.
Anything can be placed here, including images.
This is some information that can go along with an image.
Anything can be placed here, including images.
This is some information that can go along with an image.
Anything can be placed here, including images.
This is some information that can go along with an image.
Anything can be placed here, including images.
This is some information that can go along with an image.
Anything can be placed here, including images.
Javascriptサンプルページ一覧
skuare.net