我如何通过几张图像循环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"); }

我想在最多5张图像之间淡入Div的背景。

我尝试在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

Answer 2

我将图像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);