jquery淡入淡出画廊

嘿，我已经用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; };

首先，您正在淡入

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++;
};

---

然而，在开始循环时，这似乎确实会中断转换流（我猜是因为fade语句现在被逻辑分隔开了）。一个简单的解决方法应该是引入

current

和

next

变量，并在开始时使用fade语句中的这些变量执行所有逻辑。

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

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++;
};

---

然而，在开始循环时，这似乎确实会中断转换流（我猜是因为fade语句现在被逻辑分隔开了）。一个简单的解决方法应该是引入

current

和

next

变量，并在开始时使用所有逻辑，在fade语句中使用这些变量。

您不使用cycle插件并编写自己的效果的具体原因是什么？不。cycle插件工作得非常出色。我已经适应了。我的代码有什么问题吗？有没有具体的原因让你不使用cycle插件而编写自己的效果？不。cycle插件工作得非常出色。我已经适应了。我的代码有什么问题吗？