Fading transition slideshow
- by Simon Carlson
I've got a JavaScript that produces a slideshow. It loads the pictures before starting the actual slideshow. Code below.
var image1=new Image()
image1.src="filename1.jpg"
var image2=new Image()
image2.src="filename2.jpg"
var image3=new Image()
image3.src="filename3.jpg"
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1000)
}
And this is the required HTML for it to work:
<img src="filename1.jpg" name="slide" />
Now, if I want to have fading transitions instead of just having new pictures popping up, how do I approach this? By fading I mean either have the old picture fade out, the new fade in or possibly and most likely both fade in/out. Can this be achieved with pure JavaScript and no jQuery or Ajax?
