Question

我在模态弹出窗口中使用bxslider，虽然我将图像附加到bxslider div中，但图像不会显示。当我在bxslider div中对list标签中的图像进行硬编码时，它正在工作。那么解决这个问题的方法是什么？我需要从javascript函数

向bxslider添加图像

这是代码

       function slideimage( ) {
        $('#myModal').modal('show');

        $.ajax({
            url: 'someurl',


            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                $.each(response.d, function (index, element) {

                    var im = 'the image.png';



                    $("#bxsliderShowImage").append("<li><img alt='' src='"+im+"' height='100' width='100'/></li>");


                });     }        });

        $('.bxslider').bxSlider({
            minSlides: 1,

            slideWidth: 360,
            slideMargin: 10
        });
    }

html代码

＆lt; - 模态弹出框体开始 - ＆gt;

  <ul class="bxslider" runat="server" id="bxsliderShowImage" visible="true" style="height: 200px">
  </ul>

Answer 1

如果您要动态添加幻灯片（在您的情况下幻灯片是<li>），那么您每次都需要重新加载bxSlider。 bxSlider的API中有一种名为mitmproxy的方法。要使用它，您需要更改实例化bxSlider的方式：

var bx = $('.bxslider').bxSlider({
   slideWidth: 360,
   pager: false
});

然后在你的功能上使用它：

$("#bxsliderShowImage").append("<li><img alt='' src='"+im+"' height='100' width='100'/></li>");
bx.reloadSlider({
   slideWidth: 540,
   slideMargin: 10
});

重新加载时，请记住包含您的选项和/或更改它们，否则您只会有默认值。

bxSlider的重新加载是片状的，你最好在模态内部对幻灯片（即<li>）进行硬编码，然后只追加<img>或更好，只需更改而是src。 bxSlider的加载时间以图像加载为中心，以及图像的成败，所以请看一下这个选项：reloadSlider

Answer 2

得到答案。需要将li附加到模态ID如果有人需要帮助，则发布它。

 function slideimage() {

        $('#myModal').modal('show');

        $.ajax({
            url: '',
            data: "{'requestId':'" + requestid + "'}",

            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                $.each(response.d, function (index, element) {


                   var li = $("<li>").append("<img src='"+element.ImageName+"' width='400' height='400'/>");
                   $("#myModal ul").append(li);


                });
                $('.bxslider').bxSlider({
                    minSlides: 1,

                    slideWidth: 360,
                    slideMargin: 10
                });
                }
        });

    }

从javascript函数添加图像到bxslider

2 个答案: