ты сам понял, что написал? Не работает, потому что не фиг так выпендриваться с function(){}, выражениями с побочными эффектами и просто писать мозговыносящий код... какие-то оптимизации, которые скорее всего никто не заметит... неужели по-человечески писать нельзя? Например, как-нибудь так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
.photo {
position: absolute;
width: 550px;
height: 200px;
top: 40px;
left: 50px;
background-position: center bottom;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="photo" class="photo" style="background-image: url(http://awcentr.ru/img/a1.jpg);"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
var SlideShow = new Class({
initialize: function( el, imgs ){
this._imgs = imgs;
this._firstDiv = $(el);
this._secondDiv = new Element('div', {'class': 'photo'})
.inject(el, 'after');
this._i = 0;
},
start: function(){
this.next.of(this).runPeriodically( 3000 );
},
next: function(){
this._firstDiv.fade('out');
var src = 'http://awcentr.ru/img/'+this._imgs[this._i];
this._secondDiv.setStyle('background-image', 'url('+src+')');
this._secondDiv.fade('in');
this._swapDivs();
this._i = (this._i+1) % this._imgs.length;
},
_swapDivs: function(){
var t = this._firstDiv;
this._firstDiv = this._secondDiv;
this._secondDiv = t;
}
});
Function.implement({
of: function( o ){
var f = this;
return function(){
return f.apply( o, arguments );
};
},
runPeriodically: function( interval ){
var f = this;
setTimeout( function(){
f();
setTimeout( arguments.callee, interval );
}, interval );
}
});
</script>
<script type="text/javascript">
new SlideShow( 'photo', [
'a1.jpg', 'a2.jpg', 'a3.jpg'
]).start();
</script>
</body>
</html>