prototype-uiで、簡単スライドショーの設置

スライドショーのサンプル

サンプルデモ

ダウンロードと開設は以下サイトで

Simple images slider to create Flickr-like slideshows

設置は結構簡単そうですね。

<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/effects.js" type="text/javascript"></script>
<script src="lib/carousel.js" type="text/javascript"></script>

html表示部は以下のように。

<div id="horizontal_carousel">
<div class="container">
<ul>
<li><img alt="Picture 1" src="img/img_1.jpg" /></li>
<li><img alt="Picture 2" src="img/img_2.jpg" /></li>
<li><img alt="Picture 3" src="img/img_3.jpg" /></li>
<li><img alt="Picture 4" src="img/img_4.jpg" /></li>
<li><img alt="Picture 5" src="img/img_5.jpg" /></li>
<li><img alt="Picture 6" src="img/img_6.jpg" /></li>
<li><img alt="Picture 7" src="img/img_7.jpg" /></li>
<li><img alt="Picture 8" src="img/img_8.jpg" /></li>
<li><img alt="Picture 9" src="img/img_9.jpg" /></li>
<li><img alt="Picture 10" src="img/img_10.jpg" /></li>
</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>
</div>

jQueryとは共存できなそうです。

関連エントリ

MacOSXデザインのウィンドウをWEBで表現するAjax導入方法
JavaScript、FLASHのイメージギャラリーまとめ15個ほど
『10のJavaScript、Ajaxタブメニュー』他、タブまとめ
横にスライドするきれいな動きのアコーディオンJavaScript
ブログでも使える画像をポラロイド風にさせるJavaScript『Instant.js』
Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGraph』
Re：zapa氏 今更ですが、jQueryにはまりました