通过在背景图像之间淡入淡出的照片幻灯片

Question

我正在尝试在我的网站上实现幻灯片放映，但遇到了一些困难。我选择创建一个 div 来保存我的照片并使用 background-image 来设置照片。 所有照片都命名为 1.jpg、2.jpg ... 12.jpg。

这是 div...

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

...和 ​​CSS：

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

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

我希望在页面加载时有一张图片，然后让它在照片中淡出。这是我现在拥有的 jQuery，但以下不起作用：

• 它们彼此之间不会褪色

这是 jQuery：

(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），然后从一张照片淡入到下一张？

Answer 1

对于未显示的初始图像，如果 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);
})();

请参阅此代码笔以获取示例：http://codepen.io/keithwyland/pen/BkJoh