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

Posted 2023-03-06

【中文标题】如何通过多个图像循环 div 的 background-url？

【英文标题】：How do I cycle the background-url of a div through several images?

【发布时间】：2015-07-23 18:38:47

【问题描述】：

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

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

这可能吗？谢谢。

【问题讨论】：

你可以为这个***.com/questions/9483364/…使用CSS过渡

感谢您的帮助。我通过您发布的链接找到了这个插件，并认为我会沿着这条路走：***.com/a/17933411/2301894

【参考方案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);

【参考方案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

【讨论】：

我在您的小提琴中添加了图片以便更好地查看。很遗憾，它们在加载时会出现延迟。

谢谢@isherwood！我会调查延迟

@RobM。除了几个小问题之外，这非常有效。有没有办法让下一张图片取代上一张。而不是第一个图像消失，然后新的图像消失？另外，如果下一个图像已完全加载，是否可以只做动画？ （大问我知道，但我想我会碰碰运气，以防你知道如何做到这一点）。您发布的示例非常出色。谢谢:-)

@JohnT 没问题。您可以尝试这样的 CSS 动画：jsfiddle.net/h2fzvyr5 或查看此解决方案：dhirajkumarsingh.wordpress.com/2013/05/05/…

@RobM。感谢您的链接。我猜如果不将图像放入 div 然后选择它们，就无法同时淡入/淡出？我将致力于检测图像何时加载。再次感谢您的及时解决，我会接受您的回答:-)