Здравствуйте, сегодня хотелось бы поделиться с вами простеньким скриптом смены цвета фона сайта (блока) через определенный промежуток времени.

Скачать исходники для статьи можно ниже

1. Сам скрипт:

function changeColor(curNumber){
    curNumber++;
    if(curNumber > 4){
        curNumber = 1;
    }
    document.body.setAttribute('class', 'color' + curNumber);
    setTimeout(function(){changeColor(curNumber)}, 2000);  
}
changeColor(0);

2. Код блока, к которому будет применяться скрипт:

<div id="class"></div>

В данном примере используется id блока с название “class”, если захотите его поменять, то не забудьте изменить данный id и в коде, указанном в пункте 1.

3. CSS код для блока:

.color1{
    background: black;
}
.color2{
    background: red;
}
.color3{
    background: blue;
}
.color4{
    background: green;
}

То есть мы используем 4 цвета для фона, которые будут меняться каждые 2 секунды (или 2000 мс), если захотите увеличить или уменьшить время, то нужно изменить цифру 2000 в пункт 1.

Демо пример можно скачать здесь – автоматическая смена цвета фона сайта или блока.

Для сайтов на wordpress данный пример можно применить следующим образом:

1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов нажимаем на файл header.php и находим в нем тег и после него вставляем следующий код:

<div id="class"></div>
<script>
function changeColor(curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }
    document.body.setAttribute('class', 'color' + curNumber);
    setTimeout(function(){changeColor(curNumber)}, 2000);  
}

changeColor(0);
</script>

2. Далее открываем файл стилей – style.css – панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов нажимаем на файл style.css и в самый низ данного файла вставляем следующий код:

.color1{
    background: black;
}

.color2{
    background: red;
}

.color3{
    background: blue;
}

.color4{
    background: green;
}

После чего фон сайта должен автоматически (каждые 2 с) менять цвет.
Проверял на теме “Twenty Twelve” – работает.

Подключить данный скрипт можно и по другому…