图像轮播滑块不起作用 bxSlider答案

【问题标题】：Image carousel slider not working bxSlider图像轮播滑块不起作用 bxSlider
【发布时间】：2015-10-13 20:33:13
【问题描述】：

这就是我的轮播显示的方式

在我的代码中包含

<!-- 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 的样子

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery html carousel bxslider

【解决方案1】：

我不能肯定地说，但这可能是因为 .bxSlider() 函数在图像填充到 ul 之前正在运行

我的建议是试试这个：

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

当然，500 可能太长了，如果它确实有效，我会尝试将它降低到 10，然后再提高，直到你获得良好的性能。此外，在处理非常慢的互联网连接（如 3G 或拨号）时，超时可能会很棘手，在这种情况下，您可能需要一些更复杂的代码才能准确了解图像何时完成加载。

【讨论】：