商品紹介のアニメーションに使えるjqueryプラグイン

通販サイトなどのトップページでよく使われる商品を紹介し、アニメーションで別の商品に切り替えていくようなデザインを簡単にjqueryプラグインを使って表現することができるツールです。
jquery featureList→公式サイト
サンプルデータ
※サイトが消えているので以前のサイトを保存しているサイトから参照
表示まで時間がかかるかも…

プレビュー

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.1");</script>
<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
<script type="text/javascript">
 $(function() {
 $.featureList( $("#tabs li a"), 
 $("#output li"), 
  { start_item:1 } ); }
 );
</script>

まずは最初の3行でjqueryとfeatureListのプラグインを読みこませています。

$.featureList( $("#tabs li a"), 
 $("#output li"), 
  { start_item:1 } );

設定は簡単
最初の$("#tabs li a")は商品を切り替えるタブの部分
次の $("#output li")は右の大きな紹介画像の部分
を指定してあげます。

{ start_item:1 } で
ホームページを表示した時のアイテムをを指定しています。
一番上のアイテムからはじめたい時は0になります。

※サイトでは2種類の書き方を書いてあるのでどちらでも…

jquery.featureList-1.0.0

ダウンロードしてきたjquery.featureList-1.0.0.jsの内部を書き換えることでさらに変更できます。

…略…
options.pause_on_hover= options.pause_on_hover|| true;
options.transition_interval= options.transition_interval||5000;
…略…

一つ目、切り替わっている画像の上にマウスが来たときにアニメーションがとまるかとまらないかの設定。
・trueでとまる
・falseでとまらない。
※使わない？かも

二つ目、切り替わる画像の速度の調整です。
この場合、ミリ秒なので、5秒になります。
0秒にすると、左側のタブをクリックしないと画像が切り替わらなくなります。