1

使用 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>

最好的方法是什么？

4

4 回答 4

1

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

.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);
于 2013-04-09T04:24:56.513 回答
1

您不能在同一元素的背景图像之间淡入淡出。我的建议是插入三个（或者你想要的任何数量，真的）图像，绝对放置在彼此之上，然后在它们之间淡入淡出。

您也可以对想要淡出的文本元素执行相同的操作，或者您可以构建一系列包含两者任意组合的 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，有一千零一个资源完全涵盖了这一点，所以我会顺从他们（谷歌它！）。

于 2013-04-09T04:40:12.713 回答
0

我认为您应该考虑使用一些 jQuery 滑块插件，例如 Awkward Showcase或jQuery 循环

于 2013-04-09T04:27:08.287 回答
0

使用 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);
于 2013-04-09T04:22:21.183 回答