問題循環簡單的JavaScript幻燈片與鏈接

Question

我有一個簡單的幻燈片使用JavaScript。我想讓圖像鏈接和點擊。但是，在第一次循環後，圖像將無法加載，我只能通過我的CSS獲得帶有邊框的空白區域...我希望簡單的幻燈片工作和加載每個圖像。

下面是HTML：

<div class="slides"> 
    <a href="http://www.google.de" target="_blank"><img src="images/sample_slides/test.jpg"alt="test"></a> 
    <a><img src="images/sample_slides/test1.jpg" alt="test1"></a> 
    <a><img src="images/sample_slides/test2.jpg" alt="test2"></a> 
    <a><img src="images/sample_slides/test3.jpg" alt="test3"></a> 
</div> 

這裏是我的javascript：

<script type="text/javascript"> 
$(function(){$('.slides img:gt(0)').hide(); 
setInterval(function(){$('.slides :first-child').fadeOut('slow').next('img').fadeIn().end().appendTo('.slides');}, 7000);}); 
</script> 

感謝您的幫助......

Answer 1

你需要隱藏和顯示一個標籤，因爲它們是.slides的新孩子。類似於：

$(function(){ 
    $('.slides a:gt(0)').hide(); 

    setInterval(function(){ 
     $('.slides a:first-child') 
     .fadeOut('slow').next('a').fadeIn().end().appendTo('.slides'); 
    }, 7000); 
});