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?

全屏图像背景Bootsrap3旋转木马拒绝diplay

1 个答案: