Question

我有一个循环播放的幻灯片，但它不能像我期望的那样工作。

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

Jquery的：

// 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;
}

我认为应该发生的是它将通过所有元素开始排队，所以它们都会连续淡入淡出，尽管它们同时都是淡入淡出而且没有淡入淡出

Answer 1

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

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

例如：

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都会指定淡入淡出完成后使用的回调函数。所以你不会看到它们同时加载和褪色。

幻灯片已经消失了

1 个答案: