MooTools Slideshow

Create a Simple Slideshow Using MooTools

Css

#slideshow{position:relative; width:200px; height:200px;}
#slideshow li {position:absolute; top:0; left:0; z-index:2; display:block;}

Html

<ul id=slideshow>
<li><img src=image1.jpg alt='Coconut palm leaf'></li>
<li><img src=image2.jpg alt='Orange pincushion macro'></li>
<li><img src=image3.jpg alt='Forest leaves'></li>
<li><img src=image4.jpg alt='The Pomps'></li>
</ul>

MooTools

window.addEvent(domready, function(){
var x=0;
var li=$(slideshow).getElements(li);
li.each(function(el,i){el.set(opacity,[i<1?1:0]);});
function action() {
li[x].fade(out);
li[x=x<li.length-1?x+1:0].fade(in);
}
action.periodical(2000);
});