画像とかがスライドするアニメーションする効果を「カルーセル（回転木馬）」というだそうだ。jQueryとそのプラグインを使えばこれがカンタンに実現できると知る。これはぜひ試したい。
そんなjQueryプラグインの中でも機能が多く、有名なのが「carouFredSel」というもの。
circular, responsive jQuery carousel — CarouFredSel 5.5.0
なんでも、画像（img）やリスト（li）以外のHTML要素なんでもカルーセル化できるんだそうだ。ほんとに？ そんなカンタンにできんの？ ということで試してみた。
できあがったcarouFredSelのサンプル
指定したタイミングで自動スクロールするほか、ボタンを加えることも可能（自分でボタンを配置して、そのidをスクリプト側で指定する）。なかなか見栄えのいいものができあがる。
ここで試したのは、Amazonのランキングブログパーツ。各商品はdivで囲まれており、全体もまた別のdivで囲まれている。でもって、それぞれにclassがついているので、うまいことスタイルシートを書いたり、スクリプトで指定したりするという具合。
divが列挙されたような構成でも問題なく動作することに驚き！
これなら、ほんとになんでもカルーセル化できるんじゃないですかね。
自分で1から書いたHTMLなら、合わせて書くこともできるわけですが、配布されてるブログパーツだとそうもいかない。でも、これだけ自由度が高いなら、carouFredSelで対応できるブログパーツは多いんじゃないかと想像してます（もちろん、Flashとかはだめですけどね）
基本的な使い方
では、carouFredSelの使い方の基本をちょっとメモ。
まずは、カルーセル化するHTMLの構造が以下だとします。
<div id="all"> <div class="each">要素 1</div> <div class="each">要素 2</div> <div class="each">要素 3</div> <div class="each">要素..</div> </div>
divが縦に並ぶ場合ですね。
この場合、個々の要素（classがeach）が、全体を示すdiv（idがall）で囲まれています。carouFredSelではこの外側にあるallを指定することになります。各要素が「div」ではなく「li」でも、スクリプトは同じ書き方でOK。
当然ながら、jQuery本体とcarouFredSelは各自自分のブログとかサイトにアップロードして使ってください。以下では、jQuery本体はGoogleに上がってるやつを使ってみました。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="アップロード先のパス/jquery.carouFredSel-5.5.0-packed.js"></script>
//
<script type="text/javascript">
(function(){
$("#all").carouFredSel({
items: 5, //表示する数
direction: "up", //方向 up/down/right/left
auto: 7000, //切り替えまでのタイミングms
scroll : {
items: 5, //スクロールする個数
duration: 1000, //スクロールにかかる時間ms
fx: "scroll",
pauseOnHover: true //カーソルがあるとスクロール停止
}
});
})();
</script>
今回の設定時のポイントとか
今回使ったブログパーツでは、商品は最大20個まで表示できるので、画面に収まるようスタイルシートを調整する必要があります。あらかじめ5個ぶんのスペースをwidthやheightで指定して、はみ出すぶんは「overflow: hidden」とかしてやればいい。個々の商品枠ももちろん、サイズを指定しないといけない。
スクリプト側で指定すれば、自動的に全体の幅や高さは設定してくれるんだけど、最初に20個全部が表示されてから縮む、みたいな動作をするので、やはりあらかじめスタイルシートで指定しておくほうが無難。大きさを固定しないとほかの要素のデザインにも影響あるしね。ということで。
また、スクリプトのロードと、ブログパーツの表示のタイミングによっては、carouFredSelがセレクタを拾えない場合があります（一般的なブログパーツはだいたいそんな感じかも）。そのため、ブログパーツが生成するdivの存在を確認した時点でトリガーされるようにするといった小技（？）を使ったりしてます。
jQueryを使うので、ブログなんかに載せる際には、ブログサービスが使ってるjQueryとバッティングしないようにとかいう配慮も必要。そのへんがまだ把握できてないので、おかしなコードになってる可能性もあるんですが。ここでのサンプルはHTMLファイルを作ってからアップロード、iframeで読み込んでます（ローカルでテストしてOKだったからといってブログの投稿でうまくいくとは限らないため、手っ取り早くテストしたファイルをそのままアップしました）。
でもって、今回のサンプルのコード
スタイルシートは、使用するブログパーツによって変わってくると思うので、ここでは掲載は割愛。
以下にはcarouFredSelを動かすためのスクリプトのみ掲載しておきます。
<script type="text/javascript">
(function(){
jQuery.noConflict();
setTimeout(function() {
if(!jQuery('div.fun9list').length) { //ブログパーツの出力完了確認
setTimeout(arguments.callee, 100);
} else {
jQuery("div.fun9list").carouFredSel({ //カルーセル化する部分（外枠）のセレクタ指定
items: 5, //表示する数
direction: "left", //方向
auto: 7000, //切り替えまでのタイミングms
prev: '#btnPrev', //id="btnPrev"をもつDOM要素にprevを設定
next: '#btnNext',//id="btnNext"をもつDOM要素にprevを設定
scroll : {
items: 5, //スクロールする個数
duration: 1000, //スクロールにかかる時間ms
fx: "scroll",
pauseOnHover: true //カーソルがあるとスクロール停止
}
});
}
}, 100);
})();
</script>
とりあえず、これで動いてますが、保証するものではありません。
なんとかうまくいったので、調子に乗ってサイドバーの右側にも同じようにカルーセル化した別のブログパーツを載せたりしてます。どうですかね？ ちゃんと動いてますかね。「気になったメモ」というのがそれです（追記：サイドバーのカルーセル化はもうやめました。追記おわり）。
参考にした記事
carouFredSelについて日本語で書かれた記事を探すと、「公式サイトにはこんなサンプルもありますよ」という話ばかりで、実際に試した話が意外と見つからない。
そんななか、役立ったのがこれ。
carouFredSel の表示方法を詳細に設定したい – とあるWebデザイナーの逆引き辞典Plus
参考にさせてもらいました。ありがとうございます！
追記：2012年4月16日
プラグインの読み込みのタイミングの問題なのか、エラーが出ることがある模様。
Zenbackとの兼ね合いのような気がしないでもないですが、jQueryを読み込んだ直後にnoConflictするようにして様子を見てみます（これまでは、carouFredSelの実行直前にやっていました）。
コメント
こんにちは
少し質問させてくださいませ
ココログフリーでもJQueryを導入する事は出来ますか？
>ココログフリーでもJQueryを導入する事は出来ますか？
以前、試した際はできましたよ。
最近のココログフリーのテンプレートがどうなってるかどうかわからないので、確かなことは言えないのですが。