javascript - 为我的 CSS 行的简单 Javascript 选项预加载图像和过渡

Question

这是我的第一个问题，我真的很困惑。 如果我违反了未知的礼节，我提前道歉。

我有一个问题，我需要用预加载的旋转背景图像填充响应式 div 行的背景，并且在图像之间进行平滑过渡。我正在通过 CSS 控制 COVER 设置。

我有一个粗糙但有效的 js 示例..但没有预加载和平滑过渡。请告知我如何通过平滑过渡完成预加载-

CSS:

.row-bkg
    background-size: cover !important;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

Javascript: (这可行，但非常基础。我需要一个具有预加载图像的软过渡)

$(function() {
    var header = jQuery('.row-bkg');
    var backgrounds = new Array(
        'url(images/banner.jpg)',
        'url(images/banner2.jpg)'
    );
    var current = 0;


    function nextBackground() {
        header.css('background',backgrounds[current = ++current % backgrounds.length]);

        setTimeout(nextBackground, 6000);
    }
    setTimeout(nextBackground, 6000);
    header.css('background', backgrounds[0]);
});

同样，上面的工作很粗糙。我只需要它在横幅之间轻轻淡入淡出并预加载图像，这样它就不会每次都显示图像下载。

关于如何调整此 Javascript 以使其执行此操作的任何想法？也许有人可以推荐一个可以代替使用的脚本，它允许我通过 CSS 设置详细信息？

提前感谢您的宝贵时间。

顺便说一句..这是它只能在我现有的响应代码中使用的地方。我正在将 custom.css 添加到现有的响应式 CSS。

<div class="row row-bkg">

Answer 1

你走在正确的轨道上......

但是，没有一种方法可以平滑地过渡 background 图像——如果你想要平滑的淡入/淡出——你必须使用不同的方法在你的 html 中的方法:

<header>

    <img>
    <img>
    <img>

</header>

这巧合地解决了您的预加载问题...

然后，您将设置它们的样式，使它们堆叠在一起，并执行如下操作:

$(函数() { 无功电流= 0; var zindex = parseInt("-"+ $("header > img").length);

    $("header > img").each(function(i) {
        $(this).css("z-index", "-" + i);
    })
    function nextBackground() {
        $("header img:nth-child(" + (current++) + ")").animate({"opacity": "0"},
        400,
        function() {
            $(this).css({
                "z-index" : zindex,
                "opacity" : "1"
            });
        });


        $("header > img").each(function() {
            $(this).css("z-index", parseInt($(this).css("z-index")) + 1);
        });

//当前++； if(current > $("header > img").length){ 当前= 0； } setTimeout(nextBackground, 1000);

    }

    setTimeout(nextBackground, 1000);
}); 

^类似的东西^应该可以工作

在 JSFiddle 中:

http://jsfiddle.net/4LFnK/2/

现在，我们要详细了解一下它的机制吗？

其中的 400 是动画持续时间，顺便说一句 --

所有发生的事情，你正在隐藏图像，然后将它移动到堆栈的最后面......这发生在动画中，当动画完成时，它会将不透明度重置回 1，并且将 zindex 设置为它需要的最低值 -

然后，它将每个 z-index 加 1，以便它们都向前移动一个槽，为下一个移回的槽腾出空间 - 这样，它们就会无缝循环。

无论您在其中粘贴多少图片，此代码都会缩放...

有什么问题吗？ ^_^