I got busy with few other client work and didn’t really get any chance to polish up the ProtoFlow widget.

iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」。

まずはデモページを見てみましょう


HTMLは次のようにシンプル

<div id="protoflow">
<img src="imgs/DSCN0940_91360.jpg"/>
<img src="imgs/stimme_von_oben_187192.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/farbraum_012_147508.jpg"/>
<img src="imgs/IMG_4906_199357.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
</div>
<ul id=”protoCaptions” class=”protoCaptions”>
<li>Caption 1</li>
<li>Caption 2</li>
<li>Caption 3</li>
<li>Caption 4</li>
<li>Caption 5</li>
<li>Caption 6</li>
<li>Caption 7</li>
<li>Caption 8</li>
</ul>

初期化も1行でＯＫ

Event.observe(window, 'load', function() {
    cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
});

覚えておけば、カバーフローみたいなの作ってといわれたときに直ぐ作れますね。
prototype.js＆script.aculo.usで実装.