Jquery 连续更改DIV类3次并循环它

我试着在3张图片之间循环我的DIV背景。我有一个DIV和3个类，每个类指定独特的背景

在页面加载时，我需要javascript将.class1追加到DIV中，然后在半秒钟后删除class1并添加.class2；半秒钟后，再次删除class2并添加.class3；最后，删除类3并返回第一个类并重新开始

HTML:

以下是JSFIDLE：

对不起，我是新手，不知道从哪里开始。提前感谢您的帮助。

试试这个：

var i = 0; // Declare a global variable to hold the current iteration value.
function changeClass(){
    $("#rabbit").removeClass("rabbit" + i)
        i = (i==3)?1:i+1;    
    $("#rabbit").addClass("rabbit" + i);

}
setInterval(changeClass, 500);

工作示例：

i=i==3？1:i+1；可以写为：

if(i == 3){ 
   // If the code reached this point the class assigned to the element in last iteration is rabbit3
   i=1; //Reset to 1
} else{ // More room to increment i
  i = i+1;
}

---

您需要的是addclass和removeclass函数以及计时器

---

要做到这一点，最好的读物是Cybernate有最好的解决方案，但是如果您需要实现切换功能，您可以始终使用。切换：

---

很好用！谢谢你介意解释一下什么是i=i=3吗；做除了这一部分我什么都懂。我知道它应该做什么，但我不明白你是怎么做到的。这正是我需要的。谢谢：

var i = 0; // Declare a global variable to hold the current iteration value.
function changeClass(){
    $("#rabbit").removeClass("rabbit" + i)
        i = (i==3)?1:i+1;    
    $("#rabbit").addClass("rabbit" + i);

}
setInterval(changeClass, 500);

if(i == 3){ 
   // If the code reached this point the class assigned to the element in last iteration is rabbit3
   i=1; //Reset to 1
} else{ // More room to increment i
  i = i+1;
}

$('div').click().toggle(
    function() {$(this).attr('class','rabbit2')},
    function() {$(this).attr('class','rabbit3')},
    function() {$(this).attr('class','rabbit1')}
)