1  var album = { 
   2    startup: function() { 
   3      new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds 
   4    }, 
   5    cycle: function() { 
   6      new Effect.Fade('image', { // the id of the <DIV> containing the photos 
   7        duration: 1, 
   8        fps: 50, 
   9        afterFinish: function() { 
  10          new Ajax.Updater('image','/album/next', { // URL for next <IMG> tag 
  11            asynchronous: true, 
  12            onSuccess: function() { 
  13              new Effect.Appear('image', {
  14                duration: 1,
  15                fps: 50,
  16                queue:'end'
  17              })
  18            } 
  19          }) 
  20        } 
  21      }) 
  22    } 
  23  } 
  24   
  25  window.onload = album.startup

   1  <div id="slideshow1" class="slide"><div>frame 1</div></div>
   2  <div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
   3  <div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
   4  <div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>
   5  
   6  <script type="text/javascript">
   7      
   8      start_slideshow(1, 4, 2000);
   9      
  10      function start_slideshow(start_frame, end_frame, delay) {
  11          setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
  12      }
  13                              
  14      function switch_slides(frame, start_frame, end_frame, delay) {
  15          return (function() {
  16              Effect.Fade('slideshow' + frame);
  17              if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
  18              setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
  19              setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
  20          })
  21      }
  22  
  23  </script>