Добавляем слайдеру функциональность
Для оформления кнопок навигации нам потребуется фоновая картинка. Выполним ее в виде спрайта.
В html разметке ничего менять не будем, разметку для навигации будем добавлять с помощью скрипта. Можно, конечно, разместить нужную конструкцию и с помощью html, но тогда не возникнет некоторых сложностей, о которых поговорим в дальнейшем.
В css слегка подправим существующие стили и добавим стилевые правила для кнопок, по клику на которые будем листать фото вперед/назад.
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
width:640px;
height:auto;
display:none;
position:absolute;
top:0;
left:20px;
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
Блоку обертке увеличиваем ширину на 40px и сдвигаем изображения на 20px от левого края. Теперь по бокам у нас появилось по 20px свободного пространства для навигации. Сами кнопки будем размещать с помощью элементов span с соответствующим классом. Благодаря тому, что стили для них уже написаны, кнопки разместятся в нужных местах, как только мы добавим разметку для них.
Теперь можно приступать к js. Перво наперво разделим функцию autoCange на две разные функции.
function cange () {
el.fadeOut(500);
el.filter(':nth-child('+indexImg+')').fadeIn(500);
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
cange();
}
Теперь autoCange() будет заниматься только счетчиком и в конце своей работы будет вызывать функцию cange(), в которую мы вынесли код, отвечающий за анимацию изображений.
Следующим шагом реализуем функционал, который будет останавливать перелистывание картинок при наведении мыши на слайдер и возобновлять анимацию, как только курсор окажется вне блока со слайдером.
var interval = setInterval(autoCange, 3000);
$('#slider').mouseover(function(){
clearInterval(interval);
});
$('#slider').mouseout(function(){
interval = setInterval(autoCange, 3000);
});
Рассмотрим подробнее, что мы тут натворили. Вполне логичным выводом будет то, что если есть какая то функция, позволяющая запускать одно и то же действие с указанным интервалом времени (setInterval), то должен быть метод, который это действие отменяет. И действительно, такая функция существует. Называется она clearInterval. Но что бы можно было прервать действие, запланированное setInterval, функции clearInterval в качестве параметра нужно передать id, который возвращает setInterval. Самый простой и, пожалуй, единственный метод - сохранить id в переменную и передать эту переменную в качестве параметра функции clearInterval.
Иными словами, сначала мы создаем переменную, в которой сохраняем значение, возвращаемое функцией setInterval.
var interval = setInterval(autoCange, 3000);
Затем с помощью метода mouseover(); отслеживаем, когда курсор мыши появится в области слайдера и применяем clearInterval(); в скобках которого указываем имя созданной переменной.
var interval = setInterval(autoCange, 3000);
$('#slider').mouseover(function(){
clearInterval(interval);
});
И последним действием на этом этапе мы отслеживаем, когда курсор мыши выйдет за пределы блока со слайдером. Как только это происходит, снова запускаем анимацию.
var interval = setInterval(autoCange, 3000);
$('#slider').mouseover(function(){
clearInterval(interval);
});
$('#slider').mouseout(function(){
interval = setInterval(autoCange, 3000);
});
Сохраняем изменения и смотрим, что у нас получилось. Если все сделано правильно, то при наведении мыши на фото, смена картинок прекращается и возобновляется, как только курсор окажется вне области изображения. На всякий случай ниже показан полный текущий код. Если что то не заработало, поищите ошибку, сверяясь по нему.
$(function () {
var el = $('#slider img'),
indexImg = 1,
indexMax = el.length;
function change () {
el.fadeOut(500);
el.filter(':nth-child('+indexImg+')').fadeIn(500);
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
}
var interval = setInterval(autoCange, 3000);
$('#slider').mouseover(function() {
clearInterval(interval);
});
$('#slider').mouseout(function() {
interval = setInterval(autoCange, 3000);
});
});
Отлично, двигаемся дальше. Добавим галерее стрелки (стили для них мы уже написали). Нам уже приходилось выполнять подобное действие, когда добавляли маркеры в меню "Аккордеон".
$('#slider').append('<span class="next"></span><span class="prev"></span>');
Если посмотреть на результат в браузере, то мы увидим, что кнопки навигации появились, но перелистывания фото при клике по ним не происходит. Приступаем к последнему этапу - пишем логику для навигации.
$('span.next').click(function() {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
});
$('span.prev').click(function() {
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change ();
});
Тут, мне кажется, все очень просто и понятно. При клике на кнопке next увеличиваем значение indexImg на единицу. Проверяем получившееся число со значением в переменной indexMax и если оно оказывается большим, то присваиваем indexImg единицу. После этого вызываем функцию change (алгоритм такой же, как в функции autoCange).
При клике на кнопке prev значение indexImg уменьшаем на один, проверяем не стало ли оно меньше единицы и, если такое произошло, то присваиваем indexImg число, сохраненное в indexMax (переходим к последнему фото).
Можно полюбоваться результатом в браузере - получено то, к чему стремились. Ниже привожу полный листинг js кода галереи для самопроверки:
$(function () {
var el = $('#slider img'),
indexImg = 1,
indexMax = el.length;
function change () {
el.fadeOut(500);
el.filter(':nth-child('+indexImg+')').fadeIn(500);
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
}
var interval = setInterval(autoCange, 3000);
$('#slider').mouseover(function() {
clearInterval(interval);
});
$('#slider').mouseout(function() {
interval = setInterval(autoCange, 3000);
});
$('#slider').append('<span class="next"></span><span class="prev"></span>');
$('span.next').click(function() {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
});
$('span.prev').click(function() {
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change ();
});
});
По ссылке ниже полный вариант того, что было рассмотрено в данной статье, кому требуется - качаем.
Осталось навести лоск. Согласитесь, если понадобится увеличить интервал смены фото, или поменять id у обертывающего блока, либо классы у кнопок, то будет не совсем удобно вносить изменения, рыская по всему коду в поисках нужных значений. В следующей статье наведем порядок и можно будет демонстрировать проделанную работу начальству.