javascript - 循环插件幻灯片未执行，但图像显示在彼此上方

Question

我向服务器发出这个 Ajax 请求:

var xhr;
xhr = $.ajax({
url: "selectedPictures.php",
type: "POST",
data: {data: selectedPictures},
cache: false,
success: function(){
document.getElementById('loadHere').innerHTML = xhr.responseText;
} });

selectedPictures 是一个整数数组。服务器端我检查相应的图片并回显它们:

 echo "<img u=\"image\" src=\"".$picinfo['dirname']."/".$picinfo['basename']."\" width=\"960\" height=\"540\" /><br>";

xhr.response 中选择 3,4,5 的输出为:

<img u="image" src="img/Folie3.jpg" width="960" height="540" /><br>
<img u="image" src="img/Folie4.jpg" width="960" height="540" /><br>
<img u="image" src="img/Folie5.jpg" width="960" height="540" /><br>

正是我想要的。当我将输出直接发布到 Cycle div 中时:

<div id="loadHere" class="cycle-slideshow" data-cycle-fx=tileSlide></div>

它工作正常，但是当我在脚本中收到服务器响应时，图片会显示在另一个上方，并且没有幻灯片效果。 我不认为这是一个 Cycle Plugin 问题，而是一个 DOM/页面加载/...问题。

Answer 1

http://jquery.malsup.com/cycle/options.html表明有一个销毁命令。因此，只需销毁循环并重新创建它即可。

尝试类似的事情

success: function(imgs){
    $("#loadHere").cycle("destroy").html(imgs).cycle()
}