图像轮播滑块不工作 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 或拨号）时，超时可能会很棘手，在这种情况下，您可能需要一些更复杂的代码来准确了解图像何时完成加载。

图像轮播滑块不工作 bxSlider

Image carousel slider not working bxSlider

javascript

jquery

html

carousel

bxslider