0

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

在此处输入图像描述

这是分区...

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

4

1 回答 1

1

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

对于淡入淡出：fadeTo()在 jQuery 中只设置一次元素的不透明度。我相信您想要的效果是在切换照片之间，第一张照片淡出，然后切换，然后第二张照片淡入。

这可以使用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

于 2013-05-08T02:12:25.040 回答