3

我正在尝试为我动态创建的图像创建幻灯片。图像的目录路径作为 ajax 调用的响应返回,并且再次进行另一个 ajax 调用,这将为我的幻灯片创建 html 结构并将其作为响应返回,我将其附加到 html。

现在,我正在使用ResponsiveSlide.js创建幻灯片。一切正常,并且 html 响应返回也得到验证,因为它确实包含正确的图像路径(我通过从 url 单独加载图像来验证)但不知何故幻灯片不会发生,只显示一个图像。

这是JS:

$(function() {
   $("#slider1").responsiveSlides({
        maxwidth: 1000,
        speed: 800
      });
});

HTML 代码是:

<ul class="rslides" id="slider1"></ul>

返回的响应是:

<li><img src="resources/images/Screenshots/Booking/Final.jpg"></li>
<li><img src="resources/images/Screenshots/Booking/0AFinal.jpg"></li>
<li><img src="resources/images/Screenshots/Booking/0BFinal.jpg"></li>

将此响应附加到 HTML ul 元素的 JS 代码是:

$.ajax({

            url: "/prismweb/results?directoryPath="+response,
            success: function (data) {
                $("#loading").hide();   //to hide the loading icon after ajax is completed
                $("#slider1").append(data);
            }
        });

JS和CSS添加:

    <script type="text/javascript" src="resources/js/jquery-2.1.4.min.js </script>

   <script type="text/javascript" src="resources/js/responsiveslides.min.js"></script>

控制台中的一切看起来都很好,当我在调试期间查看 Web 元素时,所有图像都在那里,但只显示第一个 li 图像并且没有发生幻灯片。谁能让我知道这里有什么问题?还有其他方法吗?

4

1 回答 1

0

将双冒号添加到“maxwidth”和“speed”等参数,如下所示..谢谢

$(function() {
   $("#slider1").responsiveSlides({
        "maxwidth": 1000,
        "speed": 800
      });
});
于 2016-01-13T10:24:58.577 回答