Artlines Media Blog

Javascript image fade slideshow

Check out for a look at my javascript fade-in/out image slideshow!

I finally cracked my issues in looping the slideshow and its all working very smoothly. Using setTimeout, each image appears for 3 seconds, before a new image is dynamically created, absolutely positioned on top of it but with an opacity value of 0. This value is then incremented every 0.01 second using setInterval until it reaches 100. The opacity attribute is then removed to avoid the microsoft opacity filter bug (see earlier blog), and the image below the new one is dynamically deleted.

This loop works through an array of images, and loops the array. The same effect as flash, but much more manageable, and dare I say… web 2.0?!

Comments welcome.

blog comments powered by Disqus



Back to Blog index