Показать Меню
falbar Ротатор баннеров

Ротатор баннеров – пишем сами!

Ротатор баннеров

Реклама – второй двигатель прогресса, первый – человеческая лень! Далеко не секрет, что реклама – составляет фактически 90% сегодняшнего интернета. Проанализируйте, что мы видим «сёрфя» интернет паутину: магазины и сайты каталоги производителей – без комментариев; стартовая страница Яндекса – основной доход компании реклама, причём как директ, так и различные баннеры; наша с Вами почта – продающий контент в ней появился сравнительно недавно, но уже прочно укрепился; социальные сети – должно быть самый извращенный вариант скрытой рекламы, поскольку контент в них, пользователем как реклама не воспринимается, и мы сыпем кучу лайков на пост, откровенно содержащий в себе кучу брендов. Собственно, редкий блогер не повесит у себя на сайте баннерную рекламу.

На злобу дня и мы не обойдем эту тему стороной, все-таки денежный стимул – весьма нужная штука для поддержания ресурса в адекватном состоянии, да за домен и хостинг тоже приходится платить, а заработать в интернете можно только рекламой. Главное не переусердствовать и не превратить сайт в нагромождение ссылок, баннеров, ротаторов и прочего, когда от нужного для пользователя контента остаются жалкие крохи. Люди такой сайт будут посещать только по большой нужде, скажем, при поиске драйверов, разработчики этим внаглую пользуются, что мы и наблюдаем на подобных ресурсах.

Сегодня мы зададимся целью сделать рекламу ненавязчивой и не мешающей нашим пользователям, а нам – приносящей скромный доход на развитие. Ротатор баннеров – тема нынешней статьи. Напишем скрипт сами, без использования готовых слайдеров и галерей, воспользуемся только библиотекой jQuery.

При написании собственного ротатора баннеров или мини слайдера изображений, не будем использовать стандартную jQuery обёртку для плагинов, так как это точечное решение и в этой статье будет описан сам принцип скрипта. Конечно, при необходимости оформить всё это дело как плагин, запихнуть код в обертку, я думаю, труда не составит.

Наш же скрипт будет делиться на три части, первая из которых, как всегда, HTML разметка:

<div id="rotator">
	<a href="#">
		<img src="img1.jpg" alt="image" />
	</a>
	<a href="#">
		<img src="img2.jpg" alt="image" />
	</a>
	<a href="#">
		<img src="img3.jpg" alt="image" />
	</a>
</div>

Тут всё просто: у нас есть обертка, в которую вложены ссылки с изображениями – эта структура максимально проста и удобна для нашей задачи. Всё остальное добавим через jQuery код.

Переходим к нашим стилям:

#rotator{
	width: 210px;
}
	#rotator .stage{
		height: 375px;
		position: relative;
	}
		#rotator .stage a{
			height: 100%;
			text-decoration: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		#rotator .stage a.prev{
			z-index: 2;
		}
		#rotator .stage a.active{
			z-index: 3;
		}
	#rotator .nav{
		height: 25px;
		text-align: center;
		-webkit-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: default;
	}
		#rotator .nav div{
			display: inline-block;
			height: 100%;
			width: 14px;
			cursor: pointer;
		}
			#rotator .nav div span{
				display: inline-block;
				border: 1px solid #7f7f7f;
				border-radius: 4px;
				height: 4px;
				width: 4px;
			}
			#rotator .nav div.active span{
				background-color: #7f7f7f;
			}

Первое что из этого CSS видно: наша HTML структура ротатора баннеров будет расширена! Через jQuery мы добавим обертку для всех ссылок с классом .stage и добавим за этим блоком навигацию с классом .nav. Так же мы будем контролировать активный экран и пункт навигации классом .active. Для того чтобы у нас получилось плавная смена баннеров, нужно будет предыдущему слайду (экрану) добавлять класс .prev в котором мы указываем соответствующий z-index.

Теперь стоит перейти к самому скрипту, начнем, пожалуй, со стандартных обёрток и проверки наличия самого HTML блока с id= rotator:

$(function(){

	/* Ротатор изображений */
	(function(){

		if($("#rotator").length){


			/* 
			
			   Тут будет находиться 
			   непосредственно сам код
			   ротатора изображений
			
			*/

		};
	})();
});

Далее добавляем три переменных, в которых будут храниться идентификатор таймера, jQuery объект выборки по id= rotator и число изображений в нём:

var timer,
	rotator = $("#rotator"),
	counImg = rotator.find("a").length;

Используя следующую цепочку из jQuery методов, мы добавим недостающий HTML код:

rotator.wrapInner("<div class='stage'></div>")
	   .find(".stage a:first-child")
	   .addClass("active")
	   .parent()
	   .after("<div class='nav'></div>")
	   .next(".nav")
	   .append(function(){

	   		var html = "";
	   		for(var i = 0; i < counImg; i++){

	   			if(i == 0){

					html += "<div class='active'><span></span></div>";
	   			}else{

	   				html += "<div><span></span></div>";
	   			};
	   		};

			return html;
	   });

На этом подготовительная часть закончилась, и далее мы приступаем к самой реализации ротатора баннеров, мини галерейки или мини слайдера – называйте как Вам удобно.

После того как мы добавили нужный HTML код, мы можем сохранить выборки экранов и кнопок навигации в переменные, которые будем в дальнейшем использовать:

var stages = rotator.find(".stage a"),
	navs   = rotator.find(".nav div");

Суть нашей анимации заключается в изменении прозрачности изображений. Этот кусок кода мы будем использовать несколько раз, поэтому самой лучший вариант – это вынести его внутрь функции, у которой будет всего один параметр index (номер слайда/экрана) и, если вдруг понадобиться изменить анимацию, то мы просто подправим содержание этой функции:

function animateStage(index){

	stages.filter(".active")
		  .removeClass("active")
		  .removeAttr("style")
		  .prev("a")
		  .removeClass("prev");
	stages.eq(index)
		  .addClass("active")
		  .css("opacity", 0)
		  .animate({
		  	"opacity": 1
		  }, 1000)
		  .prev("a")
		  .addClass("prev");

	navs.filter(".active").removeClass("active");
	navs.eq(index).addClass("active");

	return false;
};

Работа нашего ротатора изображений включает в себя 3 части:

  • Автоматическое перелистывание;
  • Управление кнопками навигации;
  • Остановка автоматической прокрутки при наведении на сам баннер или кнопки управления.

Решаем первый пункт, воспользовавшись javascript функцией setInterval(), в ней мы отслеживаем индекс активного экрана и вызываем анимацию. Тут важно сохранить идентификатор таймера в ранее созданную переменную timer, также всё это дело необходимо поместить в анонимную функцию autoChanges(), чтобы можно было выполнить два других пункта:

var autoChanges = (function(){

	timer = setInterval(function(){

		var current = navs.filter(".active").index();

		current++;

		if(current >= counImg){

			current = 0;
		};

		animateStage(current);

	}, 3000);

	return false;
});
autoChanges();

Нажатие на кнопки навигации реализуем при помощи отслеживания события click по ним:

navs.on("click", function(){

	animateStage($(this).index());

	return false;
});

Для того чтобы отключать нашу автоматическую прокрутку (а именно, таймер) необходимо отследить два события наведение на ротатор mouseenter и обратное этому событию действие mouseleave. В обработчиках этих событий Вы увидите стандартные строчки javascript кода:

rotator.on({

	mouseenter: function(){

		window.clearInterval(timer);
		timer = null;

		return false;
	},
	mouseleave: function(){

		autoChanges();
		return false;
	}
});

На этом написание нашего ротатора изображений/баннеров закончено. Код получился довольно коротким – всего где-то 100 строк javascript, но при этом мы учли основные моменты и отследили все нужные нам события. Конечно, это довольно простое решение, которое можно «апгрейдить», дописав стандартные примочки, которые будут зависеть от ваших потребностей.

Подписаться на обновления

Комментариев еще не оставлено