BarackSlideshow - Mootoolsベースの軽量スライドショー・ライブラリ
BarackSlideshowは軽量なMootoolsベースのスライドショーライブラリで、オバマ氏のサイトにも使われていたようです。
デモページ
で見た感じで、とても軽量で、画像の切り替えも速い、自動切り替え表示などの特徴や機能があります。
◇ Mootools
◇ Fx.MorphList.js（MIT-style license）
１）<head>～</head>にjavascript とCSSファイルをインポート
例：
２）スライドショー定義
例：
<div id="slideshow">
<span id="loading">Loading</span>
<ul id="pictures">
<li><img src="pic1.jpg" alt="pic1" title="pic1" /></li>
<li><img src="pic2.jpg" alt="pic2" title="pic2" /></li>
<li><img src="pic3.jpg" alt="pic3" title="pic3" /></li>
</ul>
<ul id="menu">
<li><a href="pic1.jpg">画像１</a></li>
<li><a href="pic2.jpg">画像２</a></li>
<li><a href="pic3.jpg">画像３</a></li>
</ul>
</div>
{/code}
３）スライドショー 初期化
例：
オバマ氏の公式サイト
デモページ
で見た感じで、とても軽量で、画像の切り替えも速い、自動切り替え表示などの特徴や機能があります。動作環境
◇ Mootools
◇ Fx.MorphList.js（MIT-style license）
使い方
１）<head>～</head>にjavascript とCSSファイルをインポート
例：
<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script> <script type="text/javascript" src="mootools-1.2.2.2-more.js"></script> <script type="text/javascript" src="Fx.MorphList.js"></script> <script type="text/javascript" src="BarackSlideshow.js"></script>
２）スライドショー定義
例：
<div id="slideshow">
<span id="loading">Loading</span>
<ul id="pictures">
<li><img src="pic1.jpg" alt="pic1" title="pic1" /></li>
<li><img src="pic2.jpg" alt="pic2" title="pic2" /></li>
<li><img src="pic3.jpg" alt="pic3" title="pic3" /></li>
</ul>
<ul id="menu">
<li><a href="pic1.jpg">画像１</a></li>
<li><a href="pic2.jpg">画像２</a></li>
<li><a href="pic3.jpg">画像３</a></li>
</ul>
</div>
{/code}
３）スライドショー 初期化
例：
<script lang="javascript" type="text/javascript">
window.addEvent('domready', function(){
new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true});
});
</script>
オバマ氏の公式サイト