Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Як зробити ротатор банерів jQuery

Інструкція про те, як зробити ротатор банерів своїми руками, використовуючи бібліотеку jQuery. В якій вже містяться необхідні кошти анімації, а код самого ротатора буде вміщатися в кілька рядків. При цьому кожен банер буде мати свою посилання.

Щоб зробити ротатор банерів кваліфікація програміста вам не буде потрібно. Ви просто скопіювали код, замінивши в ньому деякі дані на свої, використовуючи чіткі інструкції. За допомогою власного ротатора ви зможете збільшити заробіток в CPA партнерках багаторазово:

Наявність свого ротатора дозволило мені підвищити кликабельность банерів в кілька десятків разів, працюючи зі CPA партнеркою Admitad . Кількість банерів в ротаторі не має обмежень: в даному прикладі використовується - 3 картинки; а ефектів змінюваності - 5, їх число можна зменшити:

Спробуйте клацнути по ротаторами, кожен банер посилається на окрему сторінку. Що в ньому саме чудове? У ньому немає монотонності і звикання - саме це робить його понад клікабельним. Зміна кадрів відбувається «вроздріб» - не по порядку, з інтервалом в 4 сек. Це оптимальний інтервал, що не викликає роздратування користувачів, яке настає від частого миготіння яскравих зображень.

Для змінюваності картинок використовуються 5 ефектів, якщо ви вважаєте, що їх багато, то зможете залишити тільки потрібні. Ось вони:

  1. Горизонтальна прокрутка;
  2. Вертикальна прокрутка;
  3. Плавне заміна всіх пікселів картинки;
  4. Виростання картинки з точки;
  5. Горизонтальне обертання куба.

Перейдемо до технічної частини:

1) Щоб ротатор працював необхідно підключити бібліотеку jQuery. Для цього в тезі <head> сторінки або всього сайту помістивши в нього такий рядок:

<Script type = "text / javascript" src = "js / jquery-1.6.js"> </ script>

Це означає, що бібліотека jquery-1.6.js (всього 89.2 КБ) знаходиться в папці js вашого сайту. Підійде будь-яка інша версія jQuery-бібліотеки (не обов'язково 1.6), можливо якась вже знаходиться на вашому сайті - перевірте. Якщо немає, то ви легко знайдете її в Мережі.

2) Додайте наступний код css в тезі <head> сторінки або в зовнішньому css-файлі (тоді без тегів <style>), що краще, якщо ротатор буде використаний для всього сайту:

<Style type = "text / css"> .slider {width: 160px; height: 120px; overflow: hidden; position: relative; margin: 15px auto 30px} .slider> div, .slider a {width: 160px; height: 120px; left: 0px; position: absolute; background-size: 100% 100%} .slide1 {background: url (images / block-hosting.png)} .slide2 {background: url (images / block-skidka-kursy- popova.png)} .slide3 {background: url (images / block-infobiznes.png)} </ style>

Що тут потрібно поміняти?

  1. Розміри банера - в двох місцях, у мене він шириною - 160px, висотою - 120px.
  2. значення властивості margin в першому рядку, воно задає розташування слайдера на сторінці, у мене по центру.
  3. Вкажіть URL-адреси своїх зображень в background: url (...) для кожного банера, у мене їх 3. Якщо потрібно більше, то допишіть рядки по аналогії: .slide4 {...}, .slide5 {...}, ...

3) Вставте скрипт і html-код слайдера в те місце на сторінці, де буде розташовуватися ротатор:

<Script> $ (function () {var _rand = function (min, max) {return Math.floor (Math.random () * (max-min + 1)) + min;}; var ink = 1, oldink = 3; var slider = function () {setTimeout (function () {var callback = arguments.callee; $ ( '. slider div'). css ({zIndex: 0, width: '160px', height: '120px', top: '0px', left: '0px'}); $ ( '. slide' + oldink) .css ({zIndex: 1}); switch (_rand (1,5)) {case 1: $ ( '. slide '+ ink) .css ({left:' 160px ', top:' 0px ', zIndex: 2}). animate ({left:' 0px '}, 2000., slider); $ ('. slide '+ oldink ) .css ({left: '0px', top: '0px'}). animate ({left: '- 160px'}, 2000); break; case 2: $ ( '. slide' + ink) .css ( {top: '- 120px', zIndex: 2, left: '0px'}). animate ({top: '0px'}, 2000., slider); $ ( '. slide' + oldink) .css ({top: '0px', left: '0px'}). animate ({top: '120px'}, 2000); break; case 3: $ ( '. slide' + ink) .css ({top: '0px', zIndex : 2, left: '0px', opacity: 0.0}). animate ({opacity: 1.0}, 2000., slider); break; case 4: $ ( '. slide' + ink) .css ({top: _rand ( 1,120) + 'px', zIndex: 2, left: _rand (1,160) + 'px', width: '1px', height: '1px'}). animate ({top: '0px', left: '0px' , width: '160px', height: '120px'}, 2000., slider); break; ca se 5: $ ( '. slide' + ink) .css ({zIndex: 2, left: '0px', width: '1px'}). animate ({width: '160px'}, 2000., slider); $ ( '.slide' + oldink) .css ({left: '0px', width: '160px'}). animate ({left: '160px', width: '1px'}, 2000); break; } Oldink = ink ++; if (ink> 3) ink = 1;}, 2000+ _rand (1,3) * 1000);}; slider ();}); </ script> <div class = "slider"> <div class = "slide1"> <a target="_blank" href="http://webmastersam.ru/sozdat-hosting.html"> </a> </ div> <div class = "slide2"> < a target = "_ blank" href = "http://webmastersam.ru/skidka-na-kursy-popova.html"> </a> </ div> <div class = "slide3"> <a target = "_ blank "href =" http://webmastersam.ru/infobiznes.html "> </a> </ div> </ div>

Замініть в html-коді URL-адреси посилань href = "..." на свої. Якщо банерів буде більше, то допишіть рядки по аналогії: <div class = "slide4"> ... </ div>, <div class = "slide5"> ... </ div> і т.д.

Що стосується скрипта: то, що потрібно змінити я розділив порожніми рядками, крім розмірів:

  1. Замініть всі розміри банера: 160px, 120px - на свої, в т.ч. з негативними значеннями.
  2. switch (_rand (1,5)) - тут цифра 5 - це кількість ефектів змінюваності, якщо ви їх зменшіть, наприклад до двох, то замініть 5 на 2.
  3. Кейси case 1: ... - case 5: ... - це самі ефекти змінюваності. Можете прибрати будь-які з них, але не забудьте про пункт 2.
  4. У першому рядку oldink = 3 ;, а в останній if (ink> 3) - цифра 3 - це кількість картинок. Збільште цифру відповідно, якщо банерів буде більше.

Непогані результати кликабельности показав ротатор з 8-ю банерами. Більша кількість, напевно, робити не має сенсу, навряд чи хтось буде сидіти і милуватися ними. Сенс в тому, щоб змінювані картинки потрапляли в фокус користувача, поки він переглядає корисну інформацію на сторінці.


Партнерські програми інтернет-магазинів

Що в ньому саме чудове?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: