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表明存在destroy命令。所以只需破坏循环并重新创建它。

尝试类似......

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

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

1 个答案: