Event-Driven Slide Show

This example program shows how to use JavaScript's two different event timers to create a slide show utility. Note that this uses the CSS 3 opacity property so it will only display correctly in uptodate browsers. The example below has three slide shows triggering each other using events attached to slide transitions:

So, the large main image is slideshow1, this is set to run through once from beginning to end. It is set to autostart, and each frame has its own fade and duration times. The second element is slideshow2 - this is the sequence of 3 images that overlaps the bottom right corner of the main show. All slides have the same fade and duration. Initially it is triggered as an event attached to the third slide of slideshow1. The transforming star animation is slideshow3. This is triggered each time slideshow2 completes.

At some point I will write up more detailed notes on how all this works. For the moment, the intrepid JavaScript student is refered to the source and the initialization code in the head of this page.

If you want to start with a simpler example of timers, then I suggest my example on fading a background colour might be worth checking out.