Question

使用jQuery，我想在“box”中循环浏览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图像和文本的样式规则。你可能想要预加载iamges。

.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);

Answer 2

您不能在同一元素的背景图像之间淡入淡出。我的建议是插入三个（或多个你想要的，真的）图像，绝对位于彼此之上，然后在这些之间淡出。

您也可以为要淡出的文本元素执行相同操作，或者可以构建一系列包含两者的任意组合的div。

实际上，你可以采用几乎无数的方法来达到你所描述的效果，但是尝试淡化背景图像并不是其中之一。

<div class="box">
    <div class="slide bg1">
        <!-- content -->
    </div>
    <div class="slide bg2">
        <!-- content -->
    </div>
    <div class="slide bg3">
        <!-- content -->
    </div>
</div> <!-- END .box -->

...式

.box {
    position: relative; /* Set to relative to keep the containing .slide divs, ahem, relative */
}
.slide {
    position: absolute;
    top: 0px;
    left: 0px;
}
.bg1 { /* There are more elegant ways of targeting the individual slides, I'm just being lazy... */
    background-image: src('/dir/img.jpg');
}
.bg2{}
.bg3{} /* Etc, etc... */

子div之间的淡入淡出不仅可以让你改变背景图像的外观，还可以改变你想要褪色的任何其他东西（或其他任何东西）。

至于javascript，有一千零一个资源完全覆盖了这个，所以我会推荐他们（谷歌吧！）。

Answer 3

使用jQuery函数setInterval（）6秒间隔。然后，易于实现3个元素之间的填充效果和迭代......

var loop = 1;
var id = setInterval(function() {

if(loop === 3)
{
    loop = 1; //reset loop back
   //clearInterval(id); cancel interval
}
alert(" loop: "+loop);
//TODO: fadding + changing text here maybe in separate function...

loop++;

}, 6000);

Answer 4

我认为你应该考虑使用一些jQuery滑块插件例如Awkward Showcase或jQuery cycle

淡出div的背景图像，并在其中的文本

4 个答案: