jQuery幻灯片的粘性情况

Question

我需要用jQuery开发幻灯片（不是现有的幻灯片）。我能够使用我创建的名为changePic的函数更改图片（需要图像链接）。它包含了来自jQuery库的淡化动画。

对于幻灯片，我试图使用while循环。它有些作品，除了它不等待动画完成。

如何，一个）等待动画完成，B）延迟变化图像，使其显示几秒钟的画面？

也试过Settimeout，它不起作用。

编辑：

基本上改变形象是这样的：

function changePic(imglink){ 
    var imgnode = document.getElementById("galleryimg"); 
    $(imgnode).fadeTo(500, 0, function(){ 
     $(imgnode).attr("src", imglink); 
     $(imgnode).fadeTo(1000, 1); 
    }) 
} 

和幻灯片代码是这样的，但显然它不应该。

function slideshow(gallerylinks){ 
    var i=0; 
    while (i<gallerylinks.length){ 
     changePic(gallerylinks[i]); 
     i++; 
    } 
} 

Answer 1

你总是可以尝试抛弃while循环，并用永远递归函数会...

在.animate，你可以添加调用changePic功能超时功能（在任何间隔）。由于我不知道你的代码是什么样的，我将提供一个非常通用的概要。

/* array of imgUrls */ 

var imgUrls = new Array(); //populate it however 
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay) 
{ 
    $('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){ 
     $('#slideHolder').attr('src', imgUrls[slideToShowIndex]); 
     $('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() { 
      setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay}); 
     }); 
    }}); 
} 

$(document).ready(function() { 
changePic(0, 5000, 5000, 10000); 
}); 

这应（在理论上）淡出图像的，与新的一个将其交换，并且在褪色它（既服用5秒），然后添加延迟调用自身与在10中的下一幻灯片索引秒。

这绝不是完美的，但确实概括了总体思路。由于我们不知道你的代码是什么样的，我只能假设你的setTimeout出错了。这样做会确保在设置超时之前动画已经完成。这保证了幻灯片在动画改变之前不会改变。

当然，你总是可以使用的组合“：没有（：动画）”选择和setInterval的实现几乎相同的效果。

编辑：作出适当的堆叠动画的细微变化。即使在OP添加代码的情况下，这一点仍然有效。

Answer 2

你本来可以提供更多细节或示例代码，但看看stop()和delay()功能。