1

我正在尝试使用 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用来将图像置于顶部？

4

5 回答 5

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

小提琴

于 2013-08-02T14:36:01.493 回答
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. */

全屏背景演示

分区演示

于 2013-08-02T14:42:53.930 回答
2

Vegas是一个很棒的背景图片幻灯片插件。它非常容易设置和使用。我知道这并不能直接回答您的问题，但希望它能让您更轻松地编写代码。

于 2013-08-02T14:24:24.697 回答
1

我找到了！我回答了一个与这里非常相似的问题

好的，我这样做的方式与您的布局有点不同。虽然如果你不喜欢我的布局，你可以调整它。我选择了这个布局，因为它看起来是最优的。

我制作了一个为背景延伸的父 div（此外，您可以将其设置为任何大小，将其放置在任何地方，等等......）。接下来，我将三个img标签及其各自的链接放入其中（将链接替换为您自己的链接）。

接下来是一点 CSS。你会注意到我隐藏了所有图像，然后将第一个图像设置为display: block，从而使其可见。这里的另一个关键是将图像的高度和宽度设置为 100%，以便它们拉伸到父级。

最后，只需一点简单的 JS。写成你想要的样子。在我的示例中，我只是简单地抓取当前可见，然后查找下一步。如果他们下一个没有图像，那么我回到第一个！

jsFiddle 示例

jsFiddle [使用您的 jQuery 代码风格修改]

jsFiddle [使用您的 HTML 布局的修改示例]

下面是来自我的原始布局和样式的示例代码

HTML

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

CSS

#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;
}

JS

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
})
于 2013-08-02T14:25:12.837 回答
0

访问 http://www.javascriptkit.com/howto/show2.shtml它解释了我自己使用 css 和 html5 的 javascript 幻灯片的所有内容。为此，我访问http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/。

于 2013-08-02T14:32:18.767 回答