- → Программирование
- → JavaScript
- → Уроки
Создаем слайдер картинок на jQuery
В этом уроке мы создадим оригинальный слайдер картинок с помощью jQuery. Такой же стоит на Mac App Store. Он автоматически пролистывает вниз, после чего самая нижняя картинка выводиться в поле обзора слайда. Смотрим пример:
Прежняя картинка скрывается и отображается вверху списка изображений справа.
Что мы хотим от слайдера?
Естественно, удивить пользователя и повысить конверсию поискового трафика. Для этого мы создадим список нужд и пожеланий, руководствуясь которыми будем разрабатывать слайдер.
- Будем пролистывать 4 картинки (можно и больше, если вам это надо)
- Перелистывание слайдов должно быть автоматическим
- Картинка с главной области должна красиво исчезнуть
- Понадобиться две картинки для каждого слайда: большая и маленькая
Вот такой слайдер должен быть:
Начнем разработку
Прежде всего, создадим HTML страничку со структурой слайдера. Она будет выглядеть так:
<div id="image-rotate">
<div id="main-image">
</div>
<div id="side-images">
<div id="up-arrow"><img src="up.png" alt="" /></div>
<div id="image-1"><a href="#"><img src="1.jpg" alt="" /><span><img src="1s.jpg" alt="" /></span></a></div>
<div id="image-2"><a href="#"><img src="2.jpg" alt="" /><span><img src="2s.jpg" alt="" /></span></a></div>
<div id="image-3"><a href="#"><img src="3.jpg" alt="" /><span><img src="3s.jpg" alt="" /></span></a></div>
<div id="image-4"><a href="#"><img src="4.jpg" alt="" /><span><img src="4s.jpg" alt="" /></span></a></div>
<div id="down-arrow"><img src="down.png" alt="" /></div>
</div>
</div>
Мы имеем главный div блок для центральной картинки, и side-images div, для навигации справа. Внутри которого содержаться стрелочки вверх, вниз и 4 div блока для маленьких картинок.
В каждом div блоке для картинок мы имеем большое изображение (вне тега span) и маленькое (внутри тега span). Оба эти изображения являются ссылкой. Это хорошее решение, нам не нужно создавать две ссылки для каждого из них.
CSS код слайдера
CSS код очень прост. Нет потребности его рассматривать. Если не разберетесь в какой-то части, задайте вопрос в комментариях к этому уроку.
#image-rotate {
width: 900px;
height: 300px;
overflow: hidden;
margin: 0px auto;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
position: relative;
top: 100px;
}
#main-image {
width: 650px;
float: left;
position: relative;
height: 300px;
background: #343434;
}
#side-images {
float: left;
height: 300px;
position: relative;
}
#side-images div[id^=image] {
height: 100px;
width: 250px;
overflow: hidden;
position: relative;
padding: 0;
z-index: 3000;
}
#main-image div { display: none; position: absolute; }
#main-image img { display: block; }
#main-image span img { display: none; }
#up-arrow, #down-arrow {
background: #343434;
cursor: pointer;
border-radius: 20px;
width: 26px;
height: 21px;
box-shadow: 0px 0px 20px rgba(255,255,255,1);
opacity: 0.8;
z-index: 5000;
text-align: center;
color: #fff;
left: 111px;
margin: 10px 0;
position: absolute;
}
#up-arrow { top: 0; padding: 4px 0 0 0; }
#down-arrow { bottom: 0; padding: 6px 0 0 0; }
#side-images img { display: none; }
#side-images span img { display: block; }
#up-arrow img, #down-arrow img { display: inline; }
#up-arrow:active, #down-arrow:active {
box-shadow: 0px 0px 5px rgba(255,255,255,1), inset 0px 0px 15px rgba(0,0,0,1);
}
Здесь устанавливаем стандартный размер слайда (600 x 300) и размер маленькой картинки (100 x 250). Давайте взглянем на самую интересную часть… на jQuery код слайдера.
jQuery код слайдера картинок
jQuery код этого слайдера также прост, надеюсь не возникнет никаких вопросов. Не забывайте подключать библиотеку jQuery в начале html документа. Проще всего подключить так:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Прежде всего, мы инициализируем jQuery и установим несколько переменных:
$(document).ready(function() {
var number = 0;
var interval = 0;
var timer;
Далее, установим таймер для автоматического пролистывания слайдов. По умолчанию это будет происходить каждые 3000 миллисекунд. Для этого используем JavaScript функцию setInterval, внутри которой, инициируем нажатие на нижнюю стрелочку.
timer = setInterval(function() {
$('#down-arrow').click();
}, 3000);
Мы не хотим создавать лишние нагрузки на браузер и компьютер пользователя. Поэтому нужно предотвратить пролистывание слайдов, когда пользователь переключился на другую вкладку в браузере. Но, когда он возвратиться, необходимо запустить слайдер опять. Вот так это делается:
$(window).blur(function() {
clearInterval(timer);
});
$(window).focus(function() {
timer = setInterval(function() {
$('#down-arrow').click();
}, 3000);
});
Далее установим картинку, которая будет по умолчанию первой в слайдере. Пусть это будет первая картинка среди остальных. Эта картинка появиться с помощью эффекта fadeIn.
$('#side-images [id^=image]:first').appendTo('#main-image').fadeIn();
Теперь реализуем работоспособность стрелочек. Выше созданный jQuery код не будет работать, если мы этого не напишем. Нам необходимо инициализировать событие click, и проверить запущена ли анимация. Если анимация запущена, мы не будем пролистывать. Это предотвратит сбой в работе скрипта.
$('#down-arrow').click(function() {
if(animationWait == 0) {
animationWait = 1;
Мы проверили: анимация не запущена animationWait = 0, значит запустим ее и установим animationWait = 1. После чего мы убираем текущий слайд в правый блок.
$('#main-image [id^=image]').attr('style', '');
$('#main-image [id^=image]').addClass('fading').css({'display':'block'}).clone().appendTo('#side-images');
Запускаем анимацию пролистывания вниз, а также очищаем стиль картинки.
$('#side-images [id^=image]').animate({top: '0'}, 250, function() {
$('#side-images [id^=image]').attr('style', '');
/* Only run animation once */
if(number == 0) {
$('#side-images [id^=image]:last').appendTo('#main-image').fadeIn();
++number;
}
});
Помните, ранее мы клонировали главную картинку, теперь ее нужно удалить из DOM структуры страницы. Она скрыта, но все еще существует. После чего установим animationWait = 0, чтобы стрелочки снова были работоспособными.
setTimeout( function() {
animationWait = 0
$('#main-image .fading').remove();
$('#side-images .fading').removeClass('fading');
}, 300);
number = 0;
});
Если пользователь навел курсор на слайдер, нам нужно остановить автопролистывание. Когда уберет курсор – запустим снова.
$('#image-rotate').hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(function() {
$('#down-arrow').click();
}, 3000);
});
Функциональность нижней стрелочки аналогична к верхней. Клонируем картинку и помещаем сверху , чтобы при пролистывании вниз, она красиво появилась.
$('#down-arrow').click(function() {
/* Check if animating */
if(animationWait == 0) {
animationWait = 1;
$('#main-image [id^=image]').css({'display' : 'block'}).addClass('fading').clone().prependTo('#side-images');
$('#side-images [id^=image]').css({'top': '-100px'});
$('#side-images [id^=image]').animate({top: '0'}, 250, function() {
$('#side-images [id^=image]').attr('style', '');
/* Only run animation once */
if(number == 0) {
$('#side-images [id^=image]:last').appendTo('#main-image').fadeIn();
++number;
}
});
/* Change animation after a certain amount of
time */
setTimeout( function() {
animationWait = 0
$('#main-image .fading').remove();
$('#side-images .fading').removeClass('fading');
}, 300);
number = 0;
}
});
});
На этом создание слайдера картинок на jquery завершено! Этот код поместите в script.js файл, после чего можете подключать к html странице. Не забываем, ранее подключить библиотеку jquery.
Надеюсь, этот урок, действительно помог в разработке вашего сайта! Не забываем кликнуть по социальным кнопкам, это действительно поможет развитию сайта sitear.ru!
Остались вопросы? Задавайте в комментариях ниже.
Источник материала ...
Дальше: Создаем jQuery popup окно
Development — Taras Moroz