（修改）jQuery的幻燈片不工作

Question

我有一個jQuery幻燈片代碼，用下面的HTML結構正常工作：

<div id="slideshow"> 
    <div id="slideshowImages"> 
     <img src="image1.jpg" alt="" /> 
     <img src="image2.jpg" alt="" /> 
    </div> 

    <div id="slideshowNav"> 
     <span id="slideshowLeft"><a href="#"><img src="images/slideshowLeft.png" alt="&gt;" /></a></span> 
     <span id="slideshowRight"><a href="#"><img src="images/slideshowRight.png" alt="&lt;" /></a></span> 
    </div><!-- /#slideshowNav --> 
</div><!-- /#slideshow --> 

雖然現在我想修改它，這樣它會具有相同的結構工作，但不是簡單的圖像，圖像現在是鏈接。也就是說，幻燈片標記的「肉」，現在是：

<a href="#"><img src="image1.jpg" alt="" /></a> 
<a href="#"><img src="image2.jpg" alt="" /></a> 

jQuery的代碼，使幻燈片工作是一個有點冗長，所以我想我只是張貼必要的東西。它的主要原理是：

jQuery('#slideshowImages img:first').addClass('active'); 
jQuery('#slideshowImages img:last').addClass('lastImg'); 

var $active = jQuery('#slideshowImages img.active'); 

var $previous = $active.prev().length ? $active.prev(): jQuery('#slideshowImages img.lastImg'); 

    $active.animate({opacity:0.0}, 300, function() { 
     //when done animating out, animate next in 
     $previous.css({opacity:0.0}) 
      .animate({opacity: 1.0}, 400, function() { 
      $active.removeClass('active'); 
      $previous.addClass('active'); 
    }); 
}); 

如果我console.log()$active和$previous，我不斷收到同樣的事情。我有什麼辦法可以使$previous變量實際上成爲之前的圖像嗎？我認爲.prev()現在正在使錨鏈接，而不是以前的形象，雖然我可能是錯的。

要查看此代碼的實時版本，可以在http://engineercreativity.com/samples/daf查看。該網站不是英文的，但我認爲這不會影響任何內容。

感謝您的幫助！ 阿米特

Answer 1

嘗試爲相對選擇使用<a>標籤：它可以幫助

jQuery('#slideshowImages a:first').addClass('active'); 

的jQuery（ '＃slideshowImages 一個：最後的'）。addClass（ 'lastImg'）;

var $ active = jQuery（'＃slideshowImages a.active'）;

var $ previous = $ active.prev（）。length ？ $ active.prev（）： jQuery（'＃slideshowImages a.lastImg'）;

$active.animate({opacity:0.0}, 300, function() { 
    //when done animating out, animate next in 
    $previous.css({opacity:0.0}) 
     .animate({opacity: 1.0}, 400, function() { 
     $active.removeClass('active'); 
     $previous.addClass('active'); 
}); });