Javascript 样式仅适用于前两张幻灯片

我试着用两个img标签在背景上做幻灯片。我有两个随机图像，所以我有一个javascript函数来获取一个随机名称。但主要的问题是：当我缩放或调整窗口大小时，前两张幻灯片裁剪得很好，显示时没有任何问题，但在这之后，如果我尝试调整窗口大小或缩小，每张幻灯片都会发生变化。 在这里你可以看到一个错误：不管是大图片，我会调整它们的大小 这是我的密码：

function randomBackground () {

    var active = $('#background .active');
    var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
    next.attr('src', getRandomName());

    var imgHeight = next.height();
    var windowHeight = $(window).height();

    var diff = imgHeight - windowHeight;

    if(diff > 0) {
        next.css('top', -diff*0.6);
    }

    next.css('z-index', 2);

    active.fadeOut(1500, function() {
        active.css('z-index', 1).show().removeClass('active');
        next.css('z-index', 3).addClass('active');
    })
}

window.onload = function() {
    $('#background .active').attr('src', getRandomName());
    $('#background').fadeIn(1500);
    setInterval(randomBackground, 5000)
}

以下是css：

#background {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    overflow: hidden;
}

#background img {
    position: absolute;
    z-index: 1;
    float: left;
    bottom: 0px;
    left: 0px;
    top: 0px;
    height: auto;
    width: 100%;
}

#background img.active {
    z-index: 3;
}

以下是html的一部分：

<div id="background">
    <img id="current-image" class="active" />
    <img id="next-image" />
</div>

---

它似乎只影响第一次运行后加载的图像。 尝试使用

<ul><li><img ...></li></ul> 

---

结构，然后从那里获取图像。

您应该减少淡出延迟。这个问题是由浏览器引起的，因为延迟太大，它无法处理淡出和放大/缩小

active.fadeOut(300, function() {
    active.css('z-index', 1).show().removeClass('active');
    next.css('z-index', 3).addClass('active');
})

---

试着用同样宽高比的浅色图片，我没有找到答案，但我找到了一个库，它使我想要的东西成为可能。Thx to

你能添加一个url或在代码运行的情况下编辑问题吗？@JamieHutber-它有效吗？它无效。我谈论这个问题，当它不消失的时候。即使图片是static@CullyCross，我发现你使用的图片每个都超过500千焦，试着在光文件上运行相同的代码，每个120千焦。除此之外，谈论比率，你只是控制高度。考虑一下相同比例的图片。我在标题中提到过，前两张图片加载得很好，第二张图片之后就开始调整大小。在第一次运行时，它们甚至没有src属性。当我更改其值时，问题出现了。