jquery 褪色画廊

Question

大家好，我用 jQuery 写了一个简单的淡入淡出画廊。它基本上循环播放一组图像，从一个图像淡入另一个图像。正如预测的那样，它工作得很好，直到到达最后一个图像，然后它不会从最后一个图像淡出到第一个图像，只是为了显示它。

这是我的 jQuery

$(document).ready(function(){

Zindex = 99999;
i = 0;

$(".flash img").each(function(){
    $(this).css({
        'position':'absolute',
        'z-index':Zindex,
        'display':'none'
    });
    Zindex--;
});

$(".flash img:first").show();

doFade = function(){        
    if( i == 6 ) { i = 0; };        
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000);      
    setTimeout("doFade()", 2000);
    i++;
};

doFade();

});

注意：只会有 7 张图像。

我的标记

<div class='flash'>
    <img src="img/gallery/picture1.jpg" width="780" height="253" alt="Picture1">
    <img src="img/gallery/picture2.jpg" width="780" height="253" alt="Picture2">
    <img src="img/gallery/picture3.jpg" width="780" height="253" alt="Picture3">
    <img src="img/gallery/picture4.jpg" width="780" height="253" alt="Picture4">
    <img src="img/gallery/picture5.jpg" width="780" height="253" alt="Picture5">
    <img src="img/gallery/picture6.jpg" width="780" height="253" alt="Picture6">
    <img src="img/gallery/picture7.jpg" width="780" height="253" alt="Picture7">
</div> 

我认为问题出在这一行

if( i == 6 ) { i = 0; };

Answer 1

当您到达“循环”末尾并执行时，会发生两件事：

if( i == 6 ) { i = 0; };

首先，您会淡入 i + 1，这是第二个图像，而不是第一个，因为 i 现在是 0。

其次，您正在淡出第一个图像 i，它甚至不可见。当 i + 1 为 6 时，显示的最后一张图像是图像 7。

因此，您永远不会隐藏最后一张图像，也永远不会显示第一张图像。对我来说，一个非常快速的解决方案是使淡出语句首先执行（i 仍然“指向”当前图像）并设置 i = -1 而不是 0 code> 当“循环”结束时。

doFade = function(){
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000); 
    if( i == 6 ) { i = -1; }
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);             
    setTimeout("doFade()", 2000);
    i++;
};

然而，当开始循环时，这似乎确实中断了转换流程（我猜是因为淡入淡出语句现在由逻辑分隔）。一个简单的修复应该很简单，只需引入 current 和 next 变量并在开始时使用这些变量在淡入淡出语句中执行所有逻辑即可。