javascript - 如何通过多个图像循环 div 的背景 url？

Question

我已经通读了几个类似的问题，但找不到我的具体问题的答案。

我的 html 是:

<div id="top-area">
  <div class="container">

    // Show title of website here

  </div>
</div>

我的 CSS 是: #top-area { background-image: url("http://example.com/images/bg.jpg"); }

我想让我的 div 背景在最多 5 张图片之间淡出。

我试过在 css 中定义 #top-area2 和 #top-area3 然后在 jQuery 中这样做:

$("#top-area").attr("id","top-area2");

但这并没有达到我想要的效果。我发现的所有其他示例似乎都指向用隐藏图像填充 div，然后一张一张地显示它们，但这并没有给我正在寻找的背景图像行为。

这可能吗？谢谢。

Answer 1

这将交叉淡入淡出并循环显示一系列图像:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    index  = 0,
    $top   = $('#top-area');

setInterval(function() {
   $top.animate({ opacity: 0 }, 500, function() {
     $top.css('background-image', 'url('+images[++index]+')');
     $top.animate({ opacity: 1 }, 500, function() {
       if(index === images.length) index = 0;
     });
   });
}, 6000);

Demo