JQuery多媒体资料+幻灯片

我正在尝试建立一个画廊，每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>

问题 问题是，当我单击缩略图时，自动旋转会出错。它在主图像的正下方开始另一个幻灯片放映。如果我再次单击，它将开始下面的第三个幻灯片放映，依此类推

请帮忙

---

谢谢

我认为您不应该在回调中运行InOut，只需隐藏其他图像，大图像显示如下：假设它们有顺序的id

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

---

这是正确的，但在这种情况下，大图像的自动旋转将不起作用