prototype.jsと script.aculo.usを使って一定時間で画像を入れ替えるサンプル

JavaScriptで画像を定期的に入れ替え。かつエフェクト効果を付けたい。
コマンド一発で済みそうなのを軽く探してみたけど、要件を満たすライブラリが見つからなかった。で、自分で書いたらこうなった。
諸事情によりprototype.js系にした。

需要はありそうだと思ったけど、そうでもないのかな？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>

<script type="text/javascript">
var urls = ["foo.jpg", "bar.gif"]
var i = 0;

Event.observe(window, "load", function() {
　var img = $("img");

　setInterval(function() {
　　img.visualEffect("Fade", {duration: 1});
　　setTimeout(function() {
　　　img.src = urls[i];
　　　i++;
　　　if (i == urls.length) {
　　　　i = 0;
　　　}
　　　img.visualEffect("Appear", {duration: 1});
　　}, 1500);
　}, 4000);
}, true);
</script>

参考：
　script.aculo.us リファレンス
　prototype.js リファレンス
　Developer's Guide - Google AJAX Libraries API - Google Code