我有3張圖片會旋轉，但他們不會回到第一張圖片並從頭開始

Question

我有3張圖片需要旋轉並從第一張圖片開始。 這裏是我的jQuery，HTML和CSS。我相信問題出在我的jQuery代碼上。

#hero { 
    width: 960px; 
    height: 300px; 
} 
#hero div { 
    top: 324px; 
    left: 400px; 
    position: absolute; 
    z-index: 0; 
} 
#hero div.previous { 
    z-index: 1; 
} 
#hero div.current { 
    z-index: 2; 
} 

<div class= "container"> 
    <div id="hero"> 
     <div class="current"><img src="prayer2.jpg"></div> 
     <div><img src="prayer3.jpg" ></div> 
     <div><img src="Prayer1.jpg"></div> 
    </div> 

$(function() { 
    setInterval("rotateImages()",3000); 
}); 

function rotateImages() { 
    var c1 = $('#hero div.current'); 
    var n1 = c1.next(); 

    if (n1.length == 0) 
     n1 = $('#hero div: first'); 

    c1.removeClass('current').addClass('previous'); 
    n1.css({ opacity: 0.0 }).addClass('current') 
     .animate({ opacity: 1.0 }, 1000, function() { 
      c1.removeClass('previous'); 
     }); 
} 

Answer 1

有許多問題與代碼，

1. $('#hero div: first'); - 無法識別的表達。它應該是$('#hero div:first'); - 注意空間。
2. 將setInterval調用更改爲setInterval(rotateImages,3000);。原因是"rotateImages()"在全球範圍內運行。 Refer