0

大家好，我用 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; };
4

1 回答 1

3

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

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

于 2009-11-06T18:42:38.550 回答