fade and replace images without a fixed size
<p>I need to make a slideshow on a client's website, and am having troubles getting it right. The div cannot be a fixed size because the images auto resize inside a div which is the full width of the page. I have working code that does it with JavaScript, but I need to fade the images as well. I've played with adding the fadeIn function and it doesn't give me consistent results. Some help with this would be soo appreciated. Here's what I have:</p>

<pre><code>(function() {
var imageDir = 'images/';
var delayInSeconds = 6;
var images = ['extensions.jpg', 'extensions2.png', 'girl.png'];
var num = 0;
var rotator = document.getElementById('slideimage');
var newImage = document.getElementById('slideimage');


var changeImage = function() {
var oldImage = document.getElementById('slideimage');
var len = images.length;
rotator.src = imageDir + images[num++];
        if (num == len) {
        num = 0;
        };};

setInterval(changeImage, 5000);
})();
</code></pre>
