The issue I am having is fairly complicated to explain. I have written up a javascript that displays an image slideshow, and it works fairly well, despite using up more resources than I would like

// imgArr[] is populated before    
var i = 0;
var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}

function loaded(i,f) {
if (document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}

}

function displaySlideshow() {
  document.getElementById(destinationId).innerHTML = '<div id="slideWindow"><img src="'+imgArr[i]+'" />'  +  '<img src="'+imgArr[i + 1]+'" /></div>';
  setTimeout('displaySlideshow()',1000*3);
  i++;
  if (i >= imgArr.length - 1)
     i = 0;
}
loaded(destinationId,displaySlideshow);

So, this script dynamically adds two images to a HTML element, and it is wrapped in a div.

The div is styled with the height and width of the image, with the overflow (the second image) hidden. The second image is below the first, and the slideshow is meant to go from RIGHT to LEFT.

My inquiry is twofold: 1) Is there a more efficient way of doing this? 2) How would I animate the images? Would I need to put the second image on the right of the first with CSS somehow, and then set a timer to pull the images (via a style) leftward?