Скрипт смены фона блока (сайта)

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

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

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] = 'http://mnogoblog.ru/wp-content/uploads/2013/12/lupa.gif';
backgrounds[1] = 'http://mnogoblog.ru/wp-content/uploads/2013/11/ribka.gif';
backgrounds[2] = 'http://mnogoblog.ru/wp-content/uploads/2013/11/heal.gif';
backgrounds[3] = 'http://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, спускаемся в самый низ кода и вставляем нужные стили.

 

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Скрипт смены фона блока (сайта): 1 комментарий

Добавить комментарий