4

我正在尝试获取旧 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 的答案（见下文），效果很好，但我仍然找不到任何方法在图像之间平滑淡入淡出。

非常感谢所有帮助:)

4

6 回答 6

2

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

if (counter == colours.length) {

和

if (counter == images.length) {

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

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

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

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

于 2010-04-20T06:18:46.040 回答
1

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

jQuery 淡入新图像： jQuery 淡入新图像

于 2010-04-20T06:17:31.007 回答
1

试试这个...

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);
于 2010-04-20T06:27:03.480 回答
1 
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()结束循环。它未经测试，但与此类似的东西应该可以工作。

于 2010-04-20T07:24:26.870 回答
1

经过大量实验后，我不得不以否定的方式回答我自己的问题——也就是说，在这一点上，我有 99% 的把握这是不可能的。

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

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

虽然使用 jQuery 删除旧的 div 背景然后将图像插入到 div 的“前景”中会更简单。

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

于 2010-04-22T06:12:46.790 回答
0

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

这对我来说很好。

于 2012-11-09T22:47:53.147 回答