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的褪色畫廊

回答

相關問題