使用Bootstrap 3 Carousel来改变背景图像，任何平滑淡入过渡的想法？

Question

如何在以下脚本中对background-image属性进行更改以平滑过渡？

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（slid.bs.carousel到.on（slide.bs.carousel使图片更改的时间更加同步，但后来我改变了这个“active_img”成为上一张图片。

---

我试图实现类似于这个网站的一些东西https://pro.beatport.com/

到目前为止我的尝试http://jsfiddle.net/milkysbeta/1vt1pLrs/5/

Answer 1

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

（ 演示 ）

.active img {
    transition: background-image 1s linear;
}

Answer 2

尝试将它们堆叠在一起而不是向下堆叠。 然后使用javascript更改每个图像的图像z-index。 然后在所有图像上设置css转换。

Answer 3

如果你想看一下，管理到sus就会在“幻灯片”上消失，然后淡入“滑动” https://jsfiddle.net/tnxtd2ho/

所有虽然同步仍然是一秒钟慢。

      // 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 });
});