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

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()函数在更新多个字段时接受一个对象作为参数。

另见：How to define multiple CSS attributes in JQuery?

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

Fullscreen image background Bootsrap3 carousel refuse to diplay

javascript

jquery

carousel