全屏圖像背景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

回答

相關問題