使用 jQuery 在循环背景图像之间淡入淡出

Question

我正在尝试获取旧 div 的背景图像（我的意思是它已经有一个背景图像，我无法控制它，因此必须首先覆盖）以在新图像之间无限期地平滑淡出。到目前为止，这是我所拥有的：

var images = [
 "/images/home/19041085158.jpg",
 "/images/home/19041085513.jpg",
 "/images/home/19041085612.jpg"
 ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
 counter++;
 if (counter == images.length) {
     counter = 0;
 }
}, 2000);

问题是，它并不顺利（我的目标是像innerfade插件这样的东西）。

编辑：问题最初说“并且它不是不确定的（它只在数组中运行一次）。”，但马里奥纠正了我愚蠢的命名错误。

编辑2：我现在正在使用Reigel的答案（见下文），它工作得很好，但我仍然找不到任何方法可以在图像之间平滑地淡入淡出。

非常感谢所有帮助:)

Answer 1

在设置backgroundImage之前预加载图像并替换

if (counter == colours.length) {

为

if (counter == images.length) {

编辑：
图像之间的淡入淡出（注意我不是在谈论背景图像）是通过使用两个图像并更改不透明度直到一个不可见而另一个不可见来完成的。这意味着您需要在短时间内同时看到两个图像。如果您只使用一张背景图像，这是不可能的。

您可以尝试删除现有 div 上的背景图像

$(".home_banner").css({'backgroundImage':''});

并将 img 元素放置在其后面（使用较低的 z-index）并淡入和淡出它们。您甚至可以在这些上使用内部淡入淡出插件，并让它为您处理淡入淡出和循环。

Answer 2

您需要首先加载图像，然后切换到它

jQuery 淡入淡出到新图像：
jQuery 淡入新图像

Answer 3

试试这个...

var images = [
    "/images/home/19041085158.jpg",
    "/images/home/19041085513.jpg",
    "/images/home/19041085612.jpg"
    ];

var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
    $('<img>').attr('src',images[++counter]); // preload the next image
    if (counter == images.length) {
        counter = 0;
    }
}, 2000);

Answer 4

经过多次实验后，我被迫以否定的方式回答我自己的问题 - 即在这一点上我 99% 确定它无法完成。

我应该说我的情况并不理想，因为我试图淡化背景的 div 里面有其他 html 内容。如果没有，那么 Reigel 的代码和代码的组合Mario 的最后一个建议肯定会起作用，即：

• 在 Reigel 的代码之后，
• 删除旧 div 的背景。
• 插入一个具有较低 z 索引的新 div。
• 在这个新 div 的前景中添加图像。
• 过渡到使用您选择的库。

尽管使用 jQuery 删除旧的 div 背景和样式仍然会更简单。然后将图像插入 div“前景”中。

不管怎样，留下这个以防其他人试图做同样的事情。另外我讨厌没有答案的问题:)

Answer 5

var bgrotate = function(imgpool, tg){
    var imgs        = imgpool,
        loader      = new Image(),
        domelements = new Array(),
        current     = 0,
        target      = tg;

    return {
        preload: function(){
           for(var i=0; i<imgs.length; i++){
               loader = new Image();

               loader.src = 'url("' + imgs[i] + '")';
               alert(loader);
               domelements.push(loader);                   
           }
        },
        rotate: function(speed){
           tg.delay(speed).show(1, function(){
              tg.css('backgroundImage', domelements[current].src);
              current = (current < domelement.lenght ? current++ : 0);
           }
        },
        stop: function(){
              tg.stop(true, false);
        }
    }
}



      $(document).ready(function(){
           var myobj = new bgrotate(['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif', 'http://sstatic.net/so/img/logo.png'], $('#mydiv'));

           myobj.preload();
           myobj.rotate();
      }

myobj.stop() 结束循环。它未经测试，但与此类似的东西应该可以工作。

Answer 6

只需在要更改背景的类的 CSS 中添加 -webkit-transition:1s; 即可。

这对我来说效果很好。