Question

我尝试使用两个img标签在后台进行幻灯片放映。我有几个随机图像，所以我有一个javascript函数来获取一个随机的名称。但主要的问题是：当我首先缩放或调整窗口大小时，两个幻灯片裁剪得很好并且显示没有任何问题，但之后如果我尝试调整窗口大小或放大输出，则每张幻灯片都会改变。在这里你可以看到这个bug：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>

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

Answer 2

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

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

尝试使用具有相同宽高比的轻薄照片

Answer 3

我没有找到答案，但我找到了一个图书馆，这使我想要的东西成为可能。 Thx到https://github.com/srobbin/jquery-backstretch

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

3 个答案: