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

Question

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

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

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

请注意，每张图片都有标题，但我可以接受它的原样。我不需要任何文本转换。

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);
});

Answer 1

预加载图片:

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