我正在尝试为动态创建的图像创建幻灯片放映。图像的目录路径作为 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 图像并且没有幻灯片放映。谁能让我知道这里出了什么问题?还有其他方法吗?
最佳答案
在下面的“maxwidth”和“speed”等参数中添加双冒号..谢谢
$(function() {
$("#slider1").responsiveSlides({
"maxwidth": 1000,
"speed": 800
});
});
关于javascript - ResponsiveSlide.js 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34741952/