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

我有一个静态幻灯片与Bootstrap3旋转木马，工作正常，我的目标是使其动态。当图像不显示时，我无法弄清楚，而字幕却可以。全屏图像背景Bootsrap3旋转木马拒绝diplay

这个网站是直接娄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 
      }); 


     } 
    }); 
}

请我需要帮助来渲染图像。

来源

2017-07-19 user3673744

这可能涉及到引导JS之前，你的图像已经准备好初始化。尝试在加载所有图像时加载或初始化Bootstrap JS AFTER成功完成ajax调用。 –

我做了这个，但它仍然没有显示：完成：function（）{ $（'。carousel'）。carousel（{0}interval：1000 * 10 }）; } – user3673744

在创建样式对象（$ 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?

来源

2017-07-19 18:59:12

虽然你的回答确实有帮助，但现在我可以看到显示的第一张图片，而其他两张没有显示。 $（'。item：nth-child（'+ index + 1 +'）'）。css（$ cssStyle）;？我需要用新风格更新生成的项目。 – user3673744

我已经修改了Ajax成功的代码，并且它可以无缝工作： var item = $（'

'）; var captions = $（'

'+caption+'

'）; $（item）.append（captions）; $（item）.appendTo（'。carousel-inner'）。css（$ cssStyle）; – user3673744

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

回答

相关问题