我试图使用jquery fadeIn每隔几秒循环一次背景图像 这是我的HTML
<div class="bg" style="background: url(images/header1.jpg);"> </div>
<div class="bg" style="background: url(images/header2.jpg);"> </div>
<div class="bg" style="background: url(images/header3.jpg);"> </div>
这是我的Jquery
function changeBackground () {
$(".bg").first().fadeIn("slow", function showNext() {
$(this).next("div").delay(1000).fadeIn("slow", showNext);
});
}
$(document).ready(function() {
setTimeout(changeBackground, 0);
});
我不确定如何隐藏上一张图片，以便下次重新引入它。函数循环或者可以使用z-index将图像置于顶部？
答案 0 :(得分：5)
function changeBackground() {
$(".bg").first().fadeIn("slow", function showNext() {
var next = $(this).next('div').length ? $(this).next('div') : $(".bg").first();
$(this).siblings().fadeOut('slow').delay(1000);
next.fadeIn("slow", showNext);
});
}
$(document).ready(function () {
setTimeout(changeBackground, 100);
});
答案 1 :(得分：3)
好的，所以我知道这是一个JQuery问题，但我只是想给你另一种选择。只需一个div和一些关键帧就可以实现这种效果。
<强> HTML
<div class="bg"></div>
<强> CSS
.bg {
height: 500px;
width: 500px;
-webkit-animation: change-bg 10s ease infinite;
animation: change-bg 10s ease infinite;
}
@-webkit-keyframes change-bg{
0% { background-image: url(http://lorempixel.com/500/500); }
50% { background-image: url(http://lorempixel.com/501/501); }
100% { background-image: url(http://lorempixel.com/503/503); }
}
@keyframes change-bg {
0% { background-image: url(http://lorempixel.com/500/500); }
50% { background-image: url(http://lorempixel.com/501/501); }
100% { background-image: url(http://lorempixel.com/503/503); }
}
/* add the other vendor prefixes if needed. */
哦，而且，如果你想要它是全屏背景，你可以使用0 div。只是关键帧和css的其余部分。
<强> CSS
body {
background: no-repeat center center fixed;
height: 100%;
width: 100%;
-webkit-animation: change-bg 10s ease infinite;
animation: change-bg 10s ease infinite;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@-webkit-keyframes change-bg{
0% { background-image: url('http://lorempixel.com/500/500'); }
50% { background-image: url('http://lorempixel.com/501/501'); }
100% { background-image: url('http://lorempixel.com/503/503'); }
}
@keyframes change-bg {
0% { background-image: url('http://lorempixel.com/500/500'); }
50% { background-image: url('http://lorempixel.com/501/501'); }
100% { background-image: url('http://lorempixel.com/503/503'); }
}
/* add the other vendor prefixes if needed. */
<强> Div Demo
答案 2 :(得分：2)
背景图片幻灯片的精彩插件是Vegas。它的设置和使用非常简单。我知道这并没有直接回答你的问题，但希望它能让你更容易编码。
答案 3 :(得分：1)
我找到了！我回答了一个非常类似于here
的问题好的，我这样做的方式与你的布局略有不同。虽然如果你不喜欢我的布局，你可能会调整它。我选择了这种布局，因为它似乎是最佳的
我制作了一个延伸背景的父div（也可以将它设置为任意大小，将它放在任何地方等等）。接下来，我在其中放置了三个img标记及其各自的链接（用您自己的链接替换链接）。
接下来是一个小CSS。您会注意到我隐藏了所有图像，然后将第一张图像设置为display: block，从而使其可见。这里的另一个关键是将图像的高度和宽度设置为100％，以便它们延伸到父级。
最后，只是一个简单的JS。写下你想要的方式。在我的例子中，我只是抓住当前可见，然后寻找下一步。如果他们没有下一个图像，那么我会回到第一个！
以下是我原始布局和样式的示例代码
<div id="myBackground">
<img src="http://jsfiddle.net/img/initializing.png" />
<img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png" />
<img src="http://cdn.buuteeq.com/upload/4074/header3.jpg.1140x481_default.jpg" />
</div>
#myBackground {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#myBackground img {
display: none;
height: 100%;
/* this will remove "white flash" between fade */
position: absolute;
width: 100%;
}
#myBackground img:first-child {
display: block;
}
function changeBackground() {
// here i select the current one visible,
// then i check if there is another omage after it, else i go back to the first
var cur = $("#myBackground img:visible"),
nxt = cur.next().length ? cur.next() : $("#myBackground img:first");
cur.fadeOut("slow");
nxt.fadeIn(1500);
}
$(function() { // starts when page is loaded and ready
setInterval(changeBackground, 2250); // 2 second timer
})
答案 4 :(得分：0)
访问http://www.javascriptkit.com/howto/show2.shtml它解释了javascript中幻灯片的所有内容我使用了css和html5。我为此而去了http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/。