Javascript 背景图像幻灯片放映|在幻灯片放映开始前平滑过渡并预加载图像

我需要帮助，以改善背景图像幻灯片。转到JSFIDLE，查看CSS

幻灯片效果很好，但我需要通过以下操作进行改进：

添加淡出过渡。目前我成功地应用了淡入效果，然而，它会在下面留下白色背景。我希望图像在彼此之间平滑淡入，而不是在背景之间。 在幻灯片放映开始之前，预加载缓存中的图像。 请注意，每个图像都有一个标题，但我同意它的原样。我不需要任何文本转换

JSFIDLE 预加载图像：

<script>   
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    }
}
var imageURLs = [
    "content/images/slideshowImage1.jpg",
    "content/images/slideshowImage2.jpg",
    "content/images/slideshowImage3.jpg",
    "content/images/slideshowImage4.jpg",
    "content/images/slideshowImage5.jpg"
];
preloadImages(imageURLs);
</script>

---

谢谢你，这很有效！虽然如果有人能把过渡期的事情也安排好，那就太好了。我不能因此而得到赞扬。我希望我能给信贷，但我不知道我从哪里得到它时，研究方法，预加载图像。可能来自堆栈溢出！谢谢你！

<script>   
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    }
}
var imageURLs = [
    "content/images/slideshowImage1.jpg",
    "content/images/slideshowImage2.jpg",
    "content/images/slideshowImage3.jpg",
    "content/images/slideshowImage4.jpg",
    "content/images/slideshowImage5.jpg"
];
preloadImages(imageURLs);
</script>