Jquery 照片幻灯片在背景图像之间淡入淡出

我试图在我的网站上实现一个幻灯片，但遇到了一些困难。我选择创建一个div来保存我的照片，并使用背景图像来设置照片。所有照片都被命名为1.jpg，2.jpg。。。12.jpg

这是div.。

<div class="featureImg"></div>

我想有一个页面加载图像，然后让它通过照片褪色。下面是我现在拥有的jQuery，但以下内容不起作用：

• 它们不会在彼此之间消失

以下是jQuery:

#feature .featureImg {
    [...some styling...]

    background-image:url(../img/slideshow/1.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

(function() {
    var curImgId = 1;
    var numberOfImages = 12; // Change this to the number of background images
    window.setInterval(function() {
        $('#feature .featureImg').css('background-image','url(/img/slideshow/' + curImgId + '.jpg)').fadeTo('slow', 1);
        curImgId = (curImgId + 1) % numberOfImages;
    }, 5 * 1000);
})();

---

问题：我如何解决这个问题，使页面加载时有一张照片（如1.jpg），然后从一张照片淡入下一张照片？

对于未显示的初始图像，如果div中没有内容，您可能需要div的宽度和高度。如果看不到应用于该div的所有CSS，很难判断

对于衰落： jQuery中的

fadeTo（）

只设置元素的不透明度一次。我相信你想要的效果是，在切换照片之间，第一张照片淡出，然后切换，然后第二张照片淡入

这可以通过使用

fadeTo（）

中的回调函数来实现。因此，调用第一个

fadeTo（）

并将其淡入0不透明度，然后对于该

fadeTo

的回调，设置下一个背景图像，并使用第二个

fadeTo

将其恢复为1不透明度

(function() {
    var curImgId = 1;
    var numberOfImages = 12; // Change this to the number of background images
    window.setInterval(function() {
      $('#feature .featureImg').fadeTo('slow', 0, function() {
        $(this).css('background-image','url(/img/slideshow/' + curImgId + '.jpg)').fadeTo('slow', 1);
      });
        curImgId = (curImgId + 1) % numberOfImages;
    }, 5 * 1000);
})();

---

请参阅此代码笔以获取示例：

这很有效！当第一张照片淡出时，有没有办法让下一张照片淡入淡出？这就是这种方法遇到的问题。你在淡出div，而不是图像。要“交叉淡入淡出”，您需要两个独立的元素相互叠加，其中包含独立的图像，以便它们可以同时淡入淡出。