Certainly, there is more than one way to do this, but I drummed up a fiddle for ya here:
While this code could use some cleaning up, I chose to approach the problem like this:
var aImageURLs = [
"http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg",
"http://www.wallanu.com/wp-content/uploads/2014/03/landscape-3-hd-wallpapers.jpg",
"http://davidpaulboaz.org/slides/Capitol%20Reef%20Landscape.jpg"
];
var aImageObjects = [];
// build out objects
for (var i = 0; i < aImageURLs.length; i++) {
var o = new Image();
o.src = aImageURLs[i];
aImageObjects[i] = o;
}
var slideImage = document.images.slide;
slideImage.currentSlide = 0;
function slideIt(iSlideFrequency) {
function nextSlide() {
// identify next slide
slideImage.currentSlide++;
slideImage.currentSlide = (slideImage.currentSlide % aImageObjects.length);
// transition old slide out
setOpacity(slideImage, 0);
fadeOut(slideImage, 1000, function() {
// transition new slide in
slideImage.src = aImageObjects[slideImage.currentSlide].src;
fadeIn(slideImage, 1000, function() {
setTimeout(nextSlide, iSlideFrequency);
});
});
}
setTimeout(nextSlide, iSlideFrequency);
}
function fadeIn(oImg, iMillis, callback) {
var iTicks = 100;
var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
var iTick = 0;
var FadeMeIn = function(){
var fOpacity = iTick/iTicks;
setOpacity(oImg, fOpacity);
iTick++;
if (iTick <= iTicks) {
setTimeout(FadeMeIn, iWait);
}
else {
try { callback(); } catch(Err) {}
}
}
FadeMeIn();
}
function fadeOut(oImg, iMillis, callback) {
var iTicks = 100;
var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
var iTick = 100;
var FadeMeOut = function(){
var fOpacity = iTick/iTicks;
setOpacity(oImg, fOpacity);
iTick--;
if (iTick >= 0) {
setTimeout(FadeMeOut, iWait);
}
else {
try { callback(); } catch(Err) {}
}
}
FadeMeOut();
}
function setOpacity(oImg, fValue) {
// assume "real browser" values (decimals)
oImg.style.opacity = fValue;
// adjust for IE
var iValue = Math.ceil(fValue*100);
oImg.style.filter = "alpha(opacity=" + iValue + ")";
}
slideIt(3000);