// 预加载所有图像
function preloadImages(images, callback) {
    var loaded = 0;
    $(images).each(function() {
        $('<img/>').attr('src', this).on('load', function() {
            loaded++;
            if (loaded === images.length) {
                callback();
            }
        });
    });
}

var bgImages = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
preloadImages(bgImages, function() {
    // 所有图像加载完成后开始切换
    startSlideshow();
});

function startSlideshow() {
    var current = 0;
    var $bgDiv = $('#background-container');
    
    // 创建两个重叠的div用于平滑过渡
    $bgDiv.append('<div class="bg-image active"></div>');
    $bgDiv.append('<div class="bg-image"></div>');
    
    var $images = $('.bg-image');
    
    setInterval(function() {
        current = (current + 1) % bgImages.length;
        
        // 准备下一张图像
        var next = $images.not('.active').first();
        next.css('background-image', 'url(' + bgImages[current] + ')');
        
        // 淡入淡出效果
        $images.filter('.active').fadeOut(1000, function() {
            $(this).removeClass('active');
        });
        next.fadeIn(1000).addClass('active');
    }, 5000);
}

#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: none;
}

.bg-image.active {
    display: block;
}