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

Question

我正在尝试在我的网站上实施幻灯片并遇到一些困难。我选择创建一个div来保存我的照片并使用背景图像来设置照片。 所有照片都被命名为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上的宽度和高度。很难说没有看到所有的CSS被应用到那个div。

褪色： 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);
})();

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