0

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());
});
}

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

4

2 回答 2

0

您的图像将一层一层地淡入，一旦淡入完成，背景中的旧图像将隐藏。之所以可行，是因为后续图像都显示在前一个图像之上。

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

于 2013-08-19T05:52:03.997 回答
0

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

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

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

于 2013-08-19T05:52:40.167 回答