1

我有一个循环播放和所有内容的幻灯片，但它并没有像我预期的那样工作。

这是一个小提琴：http: //jsfiddle.net/Hive7/Mb5nR/1/

查询：

// Customisable

var gap = 3;
var duration = 0.6;

// Non Customisable

var g = gap * 1000;
var d = duration * 1000;
var loop = $('.slideshow img').length;
var loopDelay = 200;
var x = 1;
var i = 1;

while(i <= loop){
    $('.slideshow img:nth-child(' + x + ')').delay(g).fadeOut(d);
    x++;
    i++;
    $('.slideshow img:nth-child(' + x + ')').delay(g + loopDelay).fadeIn(d);
    var h = g;
    var g = x * h;
    var lD = loopDelay;
    var loopDelay = lD + 200;
}

我认为应该发生的是它将遍历所有开始队列的元素，因此它们都连续淡入和淡出，尽管它们都同时这样做并且没有淡入

4

1 回答 1

0

问题是 jQuery 对影响图形显示的命令使用多线程，因此您的 fadeIn 和 fadeOut 调用正在后台（在它们自己的线程中）运行，而主执行线程立即继续执行下一条指令。因此，当您的第一张图像淡出时，主线程已经在告诉下一张图像淡入。下一张图像，以及之后的一张，依此类推。都在（或多或少）完全相同的时间。

您需要的是fadeIn 和fadeOut 等命令的回调功能。请参阅jQuery API 文档页面了解淡出，并注意可以提供可选的回调。此回调必须是仅在淡出完成后才会触发的函数。您需要使用此行为，以便您的脚本仅在每次淡入淡出完成后继续。

例如：

hideCurrentImage = new function() {
    $currentImage = //your code to select displayed image goes here
    $currentImage.fadeOut(d, showNextImage);
};

showNextImage = new function() {
    $nextImage = //your code to select next image from set goes here
    $nextImage.fadeIn(d, hideCurrentImage);
};

使用这种机制意味着图像只能一个接一个地淡入和淡出，因为每次调用fadeIn和fadeOut都指定了淡入完成后要使用的回调函数。所以你不会看到它们同时加载和淡出。

于 2013-07-28T14:27:18.047 回答