向此javascript幻燈片組添加鏈接的正確方法是什麼？

Question

下面的代碼有效，直到我在圖像周圍添加一個鏈接。它可以在刪除鏈接和刪除js和css中'幻燈片img'之間的'a'的情況下使用。

頭：

<script type="text/javascript"> 

function slideSwitch() { 
var $active = $('#slideshow a img.active'); 

if ($active.length == 0) $active = $('#slideshow a img:last'); 

// use this to pull the images in the order they appear in the markup 
var $next = $active.next().length ? $active.next() 
    : $('#slideshow a img:first'); 

$active.addClass('last-active'); 
$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
    }); 
} 

$(function() { 
var $first = $('#slideshow a img:first'); 
    $first.addClass('active');  
setInterval("slideSwitch()", 4500); 
}); 

</script> 

身體：

<div id="slideshow"> 
    <a href="/samplehome"><img src="/img/slide_three.jpg" width="948px" height="432px" border="0" alt="Three"/></a> 
    <a href="/samplehome"><img src="/img/slide_two.jpg" width="948px" height="432px" border="0" alt="Two"/></a> 
    <a href="/samplehome"><img src="/img/slide_one.jpg" width="948px" height="432px" border="0" alt="Ease In Motion"/></a> 
</div> 

在CSS：

#slideshow, #sub_slideshow { 
position:relative; 
height:432px; 
width: 948px; 
display: block; 
margin: 0; 
padding: 0; 
float: right; 
} 

#slideshow a img, #sub_slideshow a img { 
position:absolute; 
top:0; 
left:0; 
z-index:8; 
opacity:0.0; 
} 

#slideshow a img.active, #sub_slideshow a img.active { 
z-index:10; 
opacity:1.0; 
} 

#slideshow a img.last-active , #sub_slideshow a img.last-active { 
z-index:9; 
} 

Answer 1

我修復了你的代碼，它工作。它有錯誤，因爲你的jQuery選擇器不正確。

改變這一行

var $next = $active.next().length ? $active.next() 
    : $('#slideshow a img:first'); 

這個

var $next = $active.parent().next().children("img").length ? $active.parent().next().children("img") 
     : $('#slideshow a img:first'); 

希望對您有所幫助！

Answer 2

的.next（）檢索頁面中的下一個兄弟，而不是下一個項目在您的原始調用返回的jQuery集內，而不是您網頁中的下一個<a>鏈接。你可以通過迭代遍歷jQuery集合（就像你將遍歷一個數組）或者使用.each（）而不是使用next（），或者你可以使用Black Ship的方法來跟蹤DOM hieararchy。