jQuery的褪色画廊

干草，我已经写了使用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; };

来源

2009-11-06 dotty

任何具体的原因，你不使用周期插件，你写你自己的作用？ http://www.malsup.com/jquery/cycle/ – 2009-11-06 10:19:46

都能跟得上。循环插件工作出色。我已经迁移到那。任何想法对我的代码的问题，但？ – dotty 2009-11-06 10:27:05

两个事情发生，当你达到了“环”的结束和执行：

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-06 18:42:38 thorncp

jQuery的褪色画廊

回答

相关问题