Javascript 使用Bootstrap 3旋转木马更改背景图像，有没有平滑淡入淡出过渡的想法？

如何在下面的脚本转换中对

背景图像

属性所做的更改平滑淡入淡出

function carousel_background() {

    // gets bootstrap 3 carousel first/active image on load.
    $(window).load(function() {
        var load_img = 'url(' + $('.active img').attr("src") + ')';

        console.log(load_img);
        $('#background-img').css('background-image', load_img);

    });

      // gets carousel next active image
    $("#carousel-example-generic").on('slid.bs.carousel', function() {

        var active_img = 'url(' + $('.active img').attr("src") + ')';
        console.log(active_img);
        $('#background-img').css('background-image', active_img);
    });
}

同时将.on（slide.bs.carousel）更改为.on（slide.bs.carousel使图片的时间更改更加同步，但随后我将此“活动图像”更改为上一个图像

---

我试图实现一些类似于这个网站的东西

这是我迄今为止的尝试

您可以使用css属性。请注意，在撰写本文时，旧浏览器上对transition属性的支持有点不足，但可以使用适当的供应商前缀进行补充

（）

---

尝试将它们叠在一起，而不是叠在页面下方。然后使用javascript更改每个图像的z索引。然后只需在所有图像上设置css转换。

管理sus，在“幻灯片”上淡出，在“幻灯片”上淡入 如果你想看看的话

尽管如此，同步速度仍然要慢一秒左右

      // get carousel "slide" active image
$("#carousel-example-generic").on('slide.bs.carousel', function() {

    var active_img = 'url(' + $('.active img').attr("src") + ')';
    // fades out active image
    $('#background-img').css('background-image', active_img).animate({ opacity: 0 }, { duration: 1000 });
});


  // get carousel "slid" active image
$("#carousel-example-generic").on('slid.bs.carousel', function() {

    var active_img = 'url(' + $('.active img').attr("src") + ')';
    // fades in "slid" active image
    $('#background-img').css('background-image', active_img).animate({ opacity: 0.3 }, { duration: 300 });
});

---

嗯，我确实尝试过这个，但没有提到为什么我没有使用它，原因是图像的大小都不同，所以.css线性传统有高度调整，看起来很糟糕。看看我的演示，使用

背景大小：cover

和两个不同大小的图像，没有高度调整。这是这个问题的最佳答案on.：\是的，我认为你是对的，但我不确定从哪里开始使用javascript来做这类事情，有人想让我看看代码可能是什么样子的……你可以添加这个。看起来你的小提琴正在做你想让它做的事，不是吗？如果没有，你还想让它做什么？图像在传输过程中正在拉伸这也降低了浏览器的速度，我通过提升引导调用和删除css转换来使用jquery。它看起来有点不错，但性能仍然不太好。我不是引导专家，可能有更简单的方法。干杯，Tofu al今天也破解了它。谢谢你你的帮助

      // get carousel "slide" active image
$("#carousel-example-generic").on('slide.bs.carousel', function() {

    var active_img = 'url(' + $('.active img').attr("src") + ')';
    // fades out active image
    $('#background-img').css('background-image', active_img).animate({ opacity: 0 }, { duration: 1000 });
});


  // get carousel "slid" active image
$("#carousel-example-generic").on('slid.bs.carousel', function() {

    var active_img = 'url(' + $('.active img').attr("src") + ')';
    // fades in "slid" active image
    $('#background-img').css('background-image', active_img).animate({ opacity: 0.3 }, { duration: 300 });
});