如何通过多个图像循环 div 的 background-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

我会将图像 URL 放在一个数组中：

var backgrounds = [
   '/img-one.jpg',
   '/img-two.jpg',
   ... 
];
var i = 0;

然后使用区间函数循环遍历它们，更新 CSS：

setInterval(function() {
    $('#top-area').css('background-image', 'url(' + backgrounds[i] + ')');

    i++;

    if (i == backgrounds.length) {
        i = 0;
    }
}, 1000);

Answer 2

这将淡入淡出并循环显示一组图像：

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