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

Question

我正在尝试DIV在3张图片之间进行背景循环.我有一个DIV和3个类,每个类都指定了独特的背景.

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

HTML:

<div id="rabbit"></div>

CSS:

.rabbit1 {background: url(http://i.imgur.com/fd3fo.jpg);}
.rabbit2 {background: url(http://i.imgur.com/SHknQ.jpg);}
.rabbit3 {background: url(http://i.imgur.com/Utel1.jpg);}

这是jsfiddle:http://jsfiddle.net/XDUSA/

对不起,我是新手,我不知道从哪里开始.提前谢谢你的帮助.

Answer 1

试试这个:

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);

工作示例:http://jsfiddle.net/XDUSA/1/

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;
}