javascript - 淡化 div 的背景图像及其中的文本

Question

使用 jQuery，我想在“框”中循环显示 3 个不同的背景图像和 3 组文本，每 6 秒淡出到下一个。

CSS:

.box {
background: url(/filepath/to/image.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

HTML:

<div class="box">
<h1>Headline</h1>
<h2>Sub-text</h2>
</div>

执行此操作的最佳方法是什么？

Answer 1

最佳 方法相当主观，但您可以使用 setInterval 并设置 3 种具有不同 bg 图像和文本的样式规则。您可能需要预加载图像。

.boxy {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.box1 {
    background-image: url(/filepath/to/image1.jpg);
    opacity: .8;
}
/* other boxes omitted for brevity */

然后你可以做一些类似于:

var boxen = [3, 1, 2];
setInterval(function () {
    boxen.push(boxen.shift());
    $(".box").removeClass(boxen.map(function (elem) { return "box" + elem; })
        .addClass("box" + boxen[0]);
}, 6000);