JSFiddle Slider代码无法在浏览器

Question

我有点失落。我已经使用这个JSFiddle代码来解决我的问题。 http://jsfiddle.net/f8d1js04/2/（谢谢MartinWebb） - 问题（上下文）在这里提出; Add Fade Effect in Slideshow (Javascript) - MartinWebb的解决方案是最底层的。

基本上我在页面上渲染一个滑块。现在，当我将随机图像链接放入JSFiddle上的imgArray时，它表现得非常完美。但是，当我在我的页面和我的文件（在dom中）中执行此操作时，在最后一个图像之后，存在间隙 - 没有图像显示的时间，然后它继续运行。我该如何摆脱这种短暂的差距？

还有什么想法可以导致这种情况发生在浏览器而不是JSFiddle上？

真诚地感谢您的帮助和帮助。帮助！

var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is       live so anything we add will get listed
imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'];


//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
    var img = document.createElement('img');
    img.src = arr[i];
    slider.appendChild(img);
} 
// note the slides reference will now contain the images so we can   
access them
}
//
// Our slideshow function, we can call this and it flips the image      instantly, once it is called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {

function fadeIn(e) {
    e.className = "fadeIn";
};

function fadeOut(e) {
    e.className = "";
};


    // first we start the existing image fading out;

    fadeOut(slides[curIndex]);

    // then we start the next image fading in, making sure if we are at the end we restart!
    curIndex++;
    if (curIndex == slides.length) {
        curIndex = 0;
    }

    fadeIn(slides[curIndex]);

    // now we are done we recall this function with a timer, simple.

    setTimeout(function () {
        slideShow();
    }, imgDuration);
};


// first build the slider, then start it rolling!

buildSlideShow(imgArray);
slideShow();