JQuery 淡化幻灯片错误答案

【问题标题】：JQuery Fade Slideshow bugJQuery 淡化幻灯片错误
【发布时间】：2013-08-19 05:44:29
【问题描述】：

我使用fadeIn 功能在jquery 中制作了一张图片幻灯片。现在，幻灯片工作正常，除了一个小问题。当它到达最后一个图像时，它应该返回并且第一个图像应该淡入。但是，相反，第一个图像只是显示；它不会淡入。下面是我的 jquery 代码：

var index = 1;

 $(document).ready(function() {
    $('.wallpaper:not(:nth-child(' + index + '))').css({ display : 'none' });
    slideShow();
});

function slideShow() {
    var $firstImg = $('.wallpaper:nth-child(' + index + ')');
    $('#para1 h3').text(index);
    if ($firstImg.next().length) {
    index ++;
    } else {
    index = 1;
}

var $nextImg = $('.wallpaper:nth-child(' + index + ')');

$nextImg.delay(6000).fadeIn(2000, function() {
    $firstImg.hide();
    $('#para1 h3').text(index); // This is just for debugging purposes
    $('#para2 h3').text($firstImg.attr('alt') + ' ' + $firstImg.css('display') + ' ' + 
    $nextImg.attr('alt') + ' ' + $nextImg.css('display')); // This too
    setTimeout(slideShow());
});
}

非常感谢您的帮助。在答案中，我需要知道为什么会发生这种情况以及解决方案。（我是新来的）谢谢。

【问题讨论】：

我认为问题出在最后一个函数上，$firstImg.hide(); 只会让它立即消失。如果$nextImg 在 $firstImg 之前没有以某种方式进行 z 索引
成功了。但是你能告诉我为什么前两张图片没有问题

标签： jquery html slideshow settimeout fadein

【解决方案1】：

您的图像将一个接一个地淡入，在淡入完成后，背景中的旧图像将隐藏。这样做的原因是因为后续图像都显示在前一个之上。

但是，对于最后一张图像，底部的图像将淡入，但不会显示，因为最顶部的图像显示在其上方。集合中的第一张图片会在背景中淡入，当上面的图片被隐藏时，它会突然出现在$firstImage.hide()。

【讨论】：

我明白了。谢谢你的回答

【解决方案2】：

问题出在最后一个函数运行时，$firstImg.hide(); 只会让它立即消失，如果 $nextImg 在 $firstImg 之前没有以某种方式进行 z-indexed

在之前的运行中，正在淡入的图片在上一张图片的顶部。所以最后一张图片在第一张的上方。

当您在此“循环”结束时再次淡入第一个时，最后一个仍然在顶部，并且只有在您调用 hide() 时才会消失。

【讨论】：

好的，我现在明白了。谢谢