Как сделать ротатор баннеров 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;

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