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

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

1. Подключение библиотеки JQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Для wordpress сайтов: Подключить JQuery можно в файле header.php (панель управления – в левом меню выбираем пункт “Внешний вид” – “Редактор” – справа в списке шаблонов выбираем файл header.php), далее ищем в коде файла header.php тег </head> и вставляем перед ним вышеуказанный код.

2. Сам скрипт для смены фона блока:

<script>
var backgrounds = new Array();
backgrounds[0] = 'https://mnogoblog.ru/wp-content/uploads/2013/12/lupa.gif';
backgrounds[1] = 'https://mnogoblog.ru/wp-content/uploads/2013/11/ribka.gif';
backgrounds[2] = 'https://mnogoblog.ru/wp-content/uploads/2013/11/heal.gif';
backgrounds[3] = 'https://mnogoblog.ru/wp-content/uploads/2013/12/zamok.gif';

var index = 0;

function rotateBG() {

    if (index > 3) {
        index = 0;
    }
    $('#wrapper3').css('background', 'url(' + backgrounds[index] + ') no-repeat');
    index++;
}

window.setInterval(rotateBG, 1000); // 1000 = 1 second
</script>

Здесь мы задаем фоновые картинки для блока с помощью тега “backgrounds”, прописывая путь до картинки.

Также указываем id блока, для которого будет применяться данный скрипт, в данном примере  – это “wrapper3”.

И еще мы задаем время смены фоновых картинок равной 1 секунде – параметр “window.setInterval”.

Для wordpress сайтов: Вышеуказанный код (“сам скрипт для смены фона блока” ) вставляем также в файле header.php сразу же после подключения JQuery библиотеки, также до тега </head>.

3. Далее нам нужно вставить сам блок с id=”wrapper3″ в нужное место на сайте.

<div id="wrapper3"></div>

Для wordpress сайтов: Для примера, расположим данный блок в сайдбаре сайта – для этого можно воспользоваться виджетом “Текст” – панель управления – в левом меню выбираем пункт “Внешний вид” и его подпункт “Виджеты”, находим виджет с названием “Текст” и переносим его в сайдбар, а внутри него прописываем вышеуказанный код для вывода блока.

4. И осталось прописать стили оформления для блока wrapper3:

#wrapper3 {
    height: 50px;
    width: 50px;
    display: block;
}

Где height и width – размеры блока, у которого будет меняться фоновая картинка.

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

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