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 = -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语句中的那些变量执行所有逻辑。

jquery褪色画廊

1 个答案: