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?