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

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 5

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

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

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

虽然只使用jQuery删除传统的div背景＆amp;更简单。然后将图像插入div'前景'。

无论如何，只是留下这个以防其他人试图做同样的事情。另外我讨厌未回答的问题：）

Answer 6

只需在CSS中为您要更改背景的班级添加-webkit-transition:1s;。

这对我来说很好。

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

6 个答案: