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

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

Наша взаимовыгодная связь https://banwar.org/

Інструкція про те, як зробити ротатор банерів своїми руками, використовуючи бібліотеку 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-ю банерами. Більша кількість, напевно, робити не має сенсу, навряд чи хтось буде сидіти і милуватися ними. Сенс в тому, щоб змінювані картинки потрапляли в фокус користувача, поки він переглядає корисну інформацію на сторінці.


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

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

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


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

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

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

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