window.addEvent('domready', function(){ // Configuration var delayTime = 5000; // Milliseconds function rotate(images, index) { images.each(function(image){ if(image.get('opacity') > 0) { image.fade('out'); } }); images[index].fade('in'); rotate.delay(delayTime , null, [images, (index + 1) % images.length]); } var slideshows = $$('.slideshow'); slideshows.each(function(slide) { var images = slide.getElements('img'); rotate(images, 0); }); });
<div class="slideshow"> <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci1.jpg" /> <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci2.jpg" /> <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci3.jpg" /> </div> <div class="slideshow" style="margin-left: 310px;"> <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci3.jpg" /> <img width="300" height="100" src="http://davidwalsh.name/dw-content/slideshow/cricci2.jpg" /> </div>
.slideshow { position: relative; } .slideshow img { position:absolute; top:0; left:0; }