Как сделать rotator классов?

Question

[zuraavl]

Не выходит сделать скрипт, который будет добавлять к существующему классу еще один, через время его удалять и добавлять новый. Или например менять символ в конце. Например есть .rotator.slide-q, нужно через две секунды удалить этот класс и добавить к .rotator.slide-g

Answer 1

[Константин Китманов]

Не выходит сделать скрипт

традиционный вопрос -- как делали, что именно не вышло, где код?

Чтобы решить эту задачу, вам понадобятся:
* Массив нужных классов, типа var classes = ['slide-q', 'slide-g', 'slide-x'];
* Функция, которая удаляет текущий класс и добавляет новый и переменная-индекс, которая отслеживает, какой по счету класс сейчас текущий, типа

var index = 0;
function nextClass (el) {
    el.classList.remove(classes[index]);
    index++;
    if (index > classes.length - 1) {
        index = 0;
    }
    el.classList.add(classes[index]);
}

* Стандартная функция setInterval, которая выполняет переданную функцию раз в n миллисекунд.
* Немножко трудолюбия, чтобы собрать из этого рабочий код.

Comments

[dtestyk]

if (index > classes.length - 1) {
index = 0;
}
можно заменить на
index %= classes.length

[Константин Китманов]

dtestyk: можно. Но я как тим-лид такой код не пропущу.

Answer 2

[Inteli Sense]

Как то так.

<script type="text/javascript" src="path/to/jquery"></script>

function test(){
      $('.rotator').hasClass('slide-q').removeClass('slide-q').addClass('slide-g');
}
setTimeout(test, 30000);