如何淡化循环库背景图像

我希望旋转div的背景图像，我认为这使我不能使用优秀的jQuery Cycle Plugin。

下面的代码是我到目前为止，但它没有我想要的行为，这是：

• 淡出第一张图片
• 在没有显示图像的情况下用第二张图像交换图像 – （在第二张图像中失败此淡入淡出）
• 并重复到无限……以及更远。

     #mydiv { width: 100%; height: 365px; margin-left: auto; margin-right: auto; position: relative; display: block; background: url(HP_jQuery1.jpg) center top no-repeat; }   $(window).load(function(){ var firstTime = true; var arr = ["url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; (function recurse(counter) { var bgImage = arr[counter]; if (firstTime == false) { $("#mydiv").fadeOut("slow"); $('#mydiv').css('background-image', bgImage); $("#mydiv").fadeIn("slow"); } else { firstTime = false; } delete arr[counter]; arr.push(bgImage); setTimeout(function() { recurse(counter + 1); }, 3600); })(0); });    
 
  

Answer 1

用例 jsBin演示

为了对背景图像进行淡入淡出，您需要一个额外的图层来覆盖您的图库。
以下是涉及的逻辑示例：

因此，为浏览器预先加载图像创建一个正常标签的DIV位置，之后我们将使用他们的src作为两个元素的覆盖background-image ：

 jQuery(function($) { var $gallery = $("#gallery"); // Your HTML gallery var $overlay = $("
"); // An overlay to X-fade var $images = $gallery.find("img"); var n = $images.length; // How many images we have var c = 0; // Just a counter to loop using Reminder Operator % $gallery.css({backgroundImage: "url("+ $images[c].src +")"}).append( $overlay ); (function loopBg(){ $overlay.hide().css({backgroundImage: "url("+ $images[++c%n].src +")"}).delay(2000).fadeTo(1200, 1, function(){ $gallery.css({backgroundImage: "url("+ $images[c%n].src +")"}); loopBg(); }); }()); }); 

 html, body{ height:100%; margin:0; /*If needed*/ } #gallery, /*Your gallery ID */ #gallery > div /*Immediate DIV child, created by jQuery*/ { position:absolute; width: 100%; height:100%; background: #000 none 50% / cover; } #gallery img{ display:none; /*Exactly. We'll use them as BG images*/ }