javascript - 背景图片幻灯片|在幻灯片开始之前使过渡平滑并预加载图像

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

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


添加淡出过渡。目前，我设法应用了淡入淡出效果，但是，它会在下面留下白色背景的情况下淡入淡出。我希望图像彼此之间而不是背景之间平滑地淡入淡出。
在开始幻灯片放映之前，将图像预加载到缓存中。


请注意，每个图像都有一个标题，但我可以保留原样。我不需要任何文本过渡。

JSFiddle http://jsfiddle.net/newsha/B4TXj/

var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 4
    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1
    $('.backgroundImage').addClass('bg' + imgValue + '');

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);
        if (imgValue < numberImages) {
            imgValue++
        } else {
            imgValue = 1
        }

        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);

        if (imgValue > 1) {
            imgValue--
        } else {
            imgValue = numberImages
        }
        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);
});

最佳答案

预载图片：

<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>