MooTools ile Slideshow Yapmak
Bu yazıda MooTools kullanarak çok basit bir slideshow yapmayı göstereceğim. Açıkçası zaten gösterilmiş olan bu yazıyı Türkçeleştireceğim. 
Hemen başlayalım:
1. MooTool’u edinelim:
Yazının başında da MooTools’a link vermiştim ama farketmeyenler için, hemen şuradan indirebilirsiniz.
2. HTML Kısmı:
HTML kısmıyla, slideshowda göstereceğimiz resimleri ayarlıyoruz:
<div id="slideshow-container"> <img src="slideshow/resim1.jpg" alt="Resim 1" /> <img src="slideshow/resim2.jpg" alt="Resim 2" /> <img src="slideshow/resim3.jpg" alt="Resim 3" /> <img src="slideshow/resim4.jpg" alt="Resim 4" /> <img src="slideshow/resim5.jpg" alt="Resim 5" /> </div>
3. CSS Kısmı:
HTML kısmı bittiğine göre CSS ile slideshowumuza ayar verelim:
#slideshow-container { width:512px; height:384px; position:relative; } #slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }
3. MooTools Entegrasyonu:
window.addEvent('domready',function() { /* settings */ var showDuration = 3000; var container = $('slideshow-container'); var images = container.getElements('img'); var currentIndex = 0; var interval; /* opacity and fade */ images.each(function(img,i){ if(i > 0) { img.set('opacity',0); } }); /* worker */ var show = function() { images[currentIndex].fade('out'); images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in'); }; /* start once the page is finished loading */ window.addEvent('load',function(){ interval = show.periodical(showDuration); }); });
Ve son olarak da MooTools entegrasyonunu yapıyoruz ki slideshow çalışsın. İşte bu üç işlemden sonra slideshowumuz hazır hale geliyor.
Kaynak: David Walsh Blog
Demo: Demo Dosyası