Измените класс DIV 3 раза подряд и зациклите его

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

Answer 2

Cybernate имеет лучшее решение, но если вам когда-либо понадобится реализовать функцию переключения, вы всегда можете использовать .toggle (): http://jsfiddle.net/rkw79/XDUSA/4/

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

Answer 3

вам нужны функции addclass() и removeclass() http://api.jquery.com/addClass/ и http://api.jquery.com/removeClass/ по таймеру http://www.w3schools.com/js/js_timing.asp

хорошее чтение для этого таймер цикла в javascript