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);
});