Javascript 全屏图像背景引导RAP3转盘拒绝播放

我有一个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
            });


        }
    });
}

函数加载横幅（）{
var-json；
$.ajax({
键入：“获取”，
网址：“BannerServ”，
数据类型：“json”，
成功：功能（数据）{
json=json.stringify（数据）；
元。每个(
$.parseJSON（json），
函数（索引，arrayObj）{
var imageName=arrayObj.image；
var caption=arrayObj.title；
var$cssStyle=“{background:url（“+imageName+”）没有固定的重复中心\
-webkit背景尺寸：封面\
-moz背景尺寸：封面\
-o-背景尺寸：封面\
背景尺寸：封面；}”；
$（''+标题+''）.appendTo（'.carousel-inner'）；
$（'.item:nth child（'+index+1+'））.css（$csssstyle）；
});
$（'.item'）.first（）.addClass（'active'）；
$（'.carousel'）。carousel({
间隔：1000*10
});
}
});
}

---

请向我提供渲染图像的帮助。

创建样式对象（$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（）函数在更新多个字段时接受一个对象作为参数

---

另请参见：

创建样式对象（$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（）函数在更新多个字段时接受一个对象作为参数

---

另请参见：

这可能与在映像准备好之前初始化引导JS有关。在ajax调用成功后，当加载所有图像时，尝试加载或初始化引导JS。我这样做了，但它仍然没有显示：complete:function（）{$（'.carousel'）.carousel（{interval:1000*10}）}这可能与在映像准备好之前初始化引导JS有关。在ajax调用成功后，当加载所有图像时，尝试加载或初始化引导JS。我这样做了，但它仍然没有显示：complete:function（）{$（'.carousel'）.carousel（{interval:1000*10}）}不过你的回答真的很有帮助，现在我可以看到显示的第一个图像，而其他两个则没有。可能是从这里：$（'.item:n子项（'+index+1+'））.css（$csssstyle）；？我需要用新的样式更新生成的项。我已经在ajax success中修改了代码，它可以无缝地工作：var item=$（“”）；变量标题=$（''+标题+''）$（项目）。附加（标题）$（项目）.appendTo（'.carousel-inner'）.css（$csssstyle）；你的回答真的很有帮助，现在我可以看到显示的第一个图像，而其他两个没有。可能是从这里：$（'.item:n子项（'+index+1+'））.css（$csssstyle）；？我需要用新的样式更新生成的项。我已经在ajax success中修改了代码，它可以无缝地工作：var item=$（“”）；变量标题=$（''+标题+''）$（项目）。附加（标题）$（项目）.appendTo（'.carousel-inner'）.css（$csssstyle）；