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，然后逐个显示它们，但这并没有给我我正在寻找的背景图像行为。 / p>

这可能吗？感谢。

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

我将图片网址放在一个数组中：

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

如何通过多个图像循环div的background-url？

2 个答案: