使用 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插件）。

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

EDIT2：我现在正在使用 Reigel 的答案（见下文），效果很好，但我仍然找不到任何方法在图像之间平滑地淡入淡出。

非常感谢所有帮助:)

Answer 1

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

if (counter == colours.length) {

与

if (counter == images.length) {

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

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

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

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

Answer 2

你需要先加载图片然后切换到它

jQuery 淡入新图像： jQuery fade to new image

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 'foreground' 会更简单。

无论如何，只要留下它以防其他人尝试做同样的事情。另外我讨厌没有答案的问题:)

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

这对我来说很好。