全屏图像背景Bootsrap3轮播拒绝显示

Question

我有一个带有Bootstrap3传送带的静态幻灯片，效果很好，我的目标是使其动态化。 当图像不显示而字幕显示时，我真的无法弄清楚。

此html在指定的任何其他内容之前直接在body标签下面。

<div class="carousel slide carousel-fade" data- ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

    </div>
</div>

和一个javascript函数：

function loadBanners() {
    var json;
    $.ajax({
        type: "GET",
        url: "BannerServ",
        dataType: "json",
        success: function(data) {

            json = JSON.stringify(data);
            $.each(
                $.parseJSON(json),
                function(index, arrayObj) {
                    var imageName = arrayObj.image;
                    var caption = arrayObj.title;

                    var $cssStyle = "{ background: url(" + imageName + ") no-repeat center center fixed;\
                                    -webkit-background-size: cover;\
                                    -moz-background-size: cover;\
                                    -o-background-size: cover;\
                                    background-size: cover; }";


                    $('<div class="item"><div class="carousel-caption">' + caption + '</div></div>').appendTo('.carousel-inner');
                    $('.item:nth-child(' + index + 1 + ')').css($cssStyle);
                });
            $('.item').first().addClass('active');
            $('.carousel').carousel({
                interval: 1000 * 10
            });


        }
    });
}

请我需要帮助以获取图像。

Answer 1

创建样式对象（$ cssStyle）时，请尝试使用实际对象而不是字符串：

var $cssStyle = { "background": "url('" + imageName + "') no-repeat center center fixed","-webkit-background-size": "cover","-moz-background-size": "cover","-o-background-size": "cover", "background-size": "cover" }

更新多个字段时，jQuery的.css（）函数接受一个对象作为参数。

另请参阅： 如何在JQuery中定义多个CSS属性？