• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом

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

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

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

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

 

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

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

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