Реклама – второй двигатель прогресса, первый – человеческая лень! Далеко не секрет, что реклама – составляет фактически 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, но при этом мы учли основные моменты и отследили все нужные нам события. Конечно, это довольно простое решение, которое можно «апгрейдить», дописав стандартные примочки, которые будут зависеть от ваших потребностей.