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，第一图像，这是不可见的连。正在显示的最后的图像是图像7，当i + 1为6。

所以你永远躲在最后的图像，决不表示第一图像。对我来说一个非常快速的解决方案是让淡出语句中的第执行（我仍是“指点”到当前图像），并设置i = -1代替0当“回路”结束。

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变量和在开始做所有的逻辑，在淡入淡出语句中使用这些变量一样简单。