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

Question

我正在尝试使用两个 img 标签在背景上进行某种幻灯片放映。我有几个随机图像，所以我有一个 javascript 函数来获取随机名称。但主要问题是:当我首先缩放或调整窗口大小时，两张 幻灯片裁剪得很好并且显示没有任何问题，但之后如果我尝试调整窗口大小或放大缩小，每张幻灯片都会发生变化。在这里您可以看到该错误:cullycross.github.io (不要介意大图像，我会调整它们的大小)这是我的代码:

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>

Answer 1

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

将图像直接添加到 html 中

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

结构，并从那里获取图像。