Question

我使用jquery功能在fadeIn中制作了图片幻灯片。现在，除了一个小问题外，幻灯片放映工作正常。当它到达最后一个图像时，它应该返回并且第一个图像应该淡入。但是，相反，第一个图像只显示;它不会淡入。这是我的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());
});
}

帮助真的很感激。在答案中，我需要知道为什么会出现这种情况以及解决方案。（我是新来的）谢谢。

Answer 1

您的图像将逐个淡入淡出，并且一旦淡入完成，背景中的旧图像将隐藏。这样做的原因是因为后续图像都显示在前一个图像的顶部。

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

Answer 2

问题出在最后一个函数运行中，$firstImg.hide();只会让它立即消失，如果$ nextImg在$ firstImg

之前不是以某种方式z-indexed

在之前的游戏中，正在淡入的图片位于上一张图片的顶部。所以最后的图片在第一张图片之上。

当你在这个“循环”结束时再次淡入第一个时，最后一个仍在顶部，只有在你拨打hide()时才会消失。

JQuery Fade幻灯片错误

2 个答案: