圖像輪播滑塊不起作用bxSlider

Question

這就是我的輪播顯示為

在我的代碼中包括

<!-- bxSlider CSS file -->
        <link rel="stylesheet" href="<c:url value="/resources/css/jquery.bxslider.css" />" type="text/css" />
        <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.js" />"></script>
        <!-- bxSlider Javascript file -->
        <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.bxslider.js" />"></script>

我將圖片動態插入ul標簽

<ul class="bxslider" id="img_carousel"/> 


                                     var img_data='data:image/jpeg;base64,' + base64Encode(data);
                     $("<li>", { html: '<img style="width:55px;height:55px" src="' + img_data + '"/>' }).appendTo("#img_carousel"); 

在這個即時通訊之后

  $('.bxslider').bxSlider();

這是我的HTML看起來像

我該如何解決？

Answer 1

我不能肯定地說，但這可能是因為.bxSlider（）函數在ul中填充圖像之前正在運行

我的建議是嘗試一下：

setTimeout(function(){
    $('.bxslider').bxSlider();
},500);

當然，500可能太長了，如果它能正常工作，我會嘗試將其降低到10並提高直到獲得良好的性能。 另外，在處理非常慢的Internet連接（例如3G或撥號）時，超時可能會很棘手，在這種情況下，您可能需要一些更復雜的代碼才能確切知道何時完成加載圖像。