图像轮播滑块不工作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并上升直到你获得良好的性能。此外，在处理非常慢的互联网连接（例如3G或拨号）时，超时可能会很棘手，在这种情况下，您可能需要一些更复杂的代码来确切知道图像何时完成加载。