帶定時器的jQuery addClass removeClass

Question

我遇到了「最新消息」模塊的問題。請看http://www.proudfootsupermarkets.com/來看一個模塊的例子（它是接近頁面頂部的div，它有一個大的圖像）。

現在我已經設置好了，當用戶點擊一個標籤時，主文章就會顯示出來。 jQuery爲此：

jQuery(document).ready(function() { 

    $(".moduletable.latestnews article:first-child").addClass("atfront") 

    $(".moduletable.latestnews article").click(function(){ 
     $(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront"); 
     $(this).css("zIndex",100).addClass("atfront").removeClass("atback"); 
    }); 
}); 

這是非常簡單和直接。我遇到的問題是我希望文章在幾秒鐘後自動更改。然後，這將進入一個無限循環從第1條開始，然後在幾秒鐘後顯示文章2等等......

我相信這是相當簡單的，但我剛剛用盡了JavaScript的知識。謝謝你，你是能夠給任何幫助:)

我創建了一個的jsfiddle http://jsfiddle.net/Bempv/

Answer 1

您可以使用setTimeout的改變在前面的文章。如果選擇與類「.atfront」的文章，然後使用.next()選擇，你應該得到的功能，你正在尋找

$(function(){ 
    var articleToggler = function articleToggler(){ 
    var front = "atfront", 
     back = "atback"; 
    return function(){ 
     var selection = $(".moduletable.latestnews") 
          .find("article.atfront") 
          .addClass(back) 
          .removeClass(front); 
      next = selection.next("article"); 
      next = next.length ? next : $(".moduletable.latestnews") 
            .find("article").first(); 
      next.addClass(front) 
       .removeClass(back); 
      console.log(selection.length,next[0]) 


     setTimeout(articleToggler(),1000); //changes every second 
    }; 
}; 

//start the rotation 
(articleToggler())(); 
}); 

的setTimeout的會叫，一旦超時作爲第一個參數傳遞的功能。超時參數以毫秒爲單位，因此上述代碼在調用函數之前等待1秒鐘。由於上面的函數將它自己添加爲回調函數，所以這將會無限次地重複。