背景图片幻灯片|在幻灯片开始之前使转换平滑并预加载图像

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>