JQuery Gallery +幻燈片

Question

我試圖建立一個畫廊，每4秒後旋轉其圖像。 除了上面的內容，我還需要一個功能，以便如果單擊縮略圖圖像，該單擊的圖像將顯示在大圖像區域中。下面是我在做什麼：

function InOut(elem) 
{ 
    elem.removeClass("hidden") 
    .fadeIn("slow") 
    .delay(2000) 
    .fadeOut("slow", function(){ 
     if(elem.next().length > 0) 
      InOut(elem.next()); 
     else 
      InOut(elem.siblings(':first')); 
    }); 

} 

$("a.thumbnail").click(function(){ 
    var MainImgID = $(this).attr("rel"); 
    $("#BigImage img").hide(); 
    InOut($("#BigImage img:nth-child("+MainImgID+")"));  
}); 

，這裏是快速的HTML

<div id="BigImage"> 
    <img src="images/1.jpg" id="0" class="hidden" /> 
    <img src="images/12.jpg" id="1" class="hidden" /> 
    <img src="images/10.jpg" id="2" class="hidden" /> 
</div> 

<div id="thumb"> 
    <ul> 
    <li><a rel="0"><img src="images/thumbs/1.jpg" /></a></li> 
    <li><a rel="1"><img src="images/thumbs/12.jpg" /></a></li> 
    <li><a rel="2"><img src="images/thumbs/10.jpg" /></a></li> 
    </ul> 
</div> 

問題 的問題是，自動旋轉搞砸了，當我點擊縮略圖。它在主圖像下方開始另一個幻燈片放映。如果我再次點擊，它啓動另一個（第三）以下等幻燈片....

請幫助...

感謝

Answer 1

我想你不應該在回調運行InOut，只是使其他圖像隱藏，和大形象展示這樣的：（假設他們有ID，它是按順序）

$("a.thumbnail").click(function(){ 
    var MainImgID = $(this).attr("rel"); 
    $("#BigImage img").hide().eq(MainImgID).show();  
});