Приветствую Вас Гость • Регистрация • Вход
Воскресенье, 22.9.2019
Главная » 2013 » Март » 9 » Делаем простой слайдер на jQuery
12:41
Делаем простой слайдер на jQuery
В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery.
Создавая жене-учительнице персональный сайт ,по надобности эффекта слайдшоу с высказываниями известных учителей Украины мне понадобился слайдер,который подошел бы для системы UCOZ и что бы был простой и негромоздкой код.
На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля с помощью jQuery.
Думаю, все знают, что такое jQuery,это так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?
  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.
  • Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).
Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.
Код
<div id="slider-wrap">
<div id="slider">
<div class="slide">Здесь содержание слайда 1</div>
<div class="slide">Здесь содержание слайда 2</div>
<div class="slide">Здесь содержание слайда 3</div>
</div>
</div>

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.
Далее рассмотрим CSS. Это разметка стилей для нашего jQuery - слайдера. Вставьте код, что приведён ниже в файл стилей (css - файл) вашего сайта или темы.
Код
#slider-wrap{ /* Оболочка слайдера и кнопок */
width:660px;
}
#slider{ /* Оболочка слайдера */
width:640px;
height:360px;
overflow: hidden;
border:#eee solid 10px;
position:relative;}
.slide{ /* Слайд */
width:100%;
height:100%;
}
.sli-links{ /* Кнопки смены слайдов */
margin-top:10px;
text-align:center;}
.sli-links .control-slide{
margin:2px;
display:inline-block;
width:16px;
height:16px;
overflow:hidden;
text-indent:-9999px;
background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
cursor:pointer;
background-position:center center;}
.sli-links .control-slide.active{
background-position:center top;}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */
display:block;
width:15px;
height:100%;
position:absolute;
top:0;
overflow:hidden;
text-indent:-999px;
background:url(arrowBg.png) left center no-repeat;
opacity:0.8;
z-index:3;
outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
right:10px;
background:url(arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
opacity:1;}

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов ( .slide).
И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.
Селектор .sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем .sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.
Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.
Давайте теперь рассмотрим сам сценарий:
Код
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
$('.slide').css(
{"position" : "absolute",
"top":'0', "left": '0'}).hide().eq(0).show();
var slideNum = 0;
var slideTime;
slideCount = $("#slider .slide").size();
var animSlide = function(arrow){
clearTimeout(slideTime);
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
$(".control-slide.active").removeClass("active");
$('.control-slide').eq(slideNum).addClass('active');
}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#"></a>')
.prependTo('#slider');
$('#nextbutton').click(function(){
animSlide("next");

})
$('#prewbutton').click(function(){
animSlide("prew");
})
}
var $adderSpan = '';
$('.slide').each(function(index) {
$adderSpan += '<span class = "control-slide">' + index + '</span>';
});
$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
$(".control-slide:first").addClass("active");

$('.control-slide').click(function(){
var goToNum = parseFloat($(this).text());
animSlide(goToNum);
});
var pause = false;
var rotator = function(){
if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
}
$('#slider-wrap').hover(
function(){clearTimeout(slideTime); pause = true;},
function(){pause = false; rotator();
});
rotator();
});

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).
Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода .css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все .hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.
Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.
Таким образом эта функция скрывает текущий div, высчитывает новый и показывает его.
Обратите внимание, что методу .fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.
Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода .hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().
Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом .slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:
Код
<div class="sli-links">
<span class="control-slide">0</span>
<span class="control-slide">1</span>
<span class="control-slide">2</span>
<span class="control-slide">3</span>
</div>

Затем если в настройках указано, что ссылки "следующий - предыдущий" нужны, то создадим и их, и сразу повесим на них обработчики. В качестве обработчика клика используем ту же самую функцию animSlide, с аргументами "next" и "prew".
Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.
В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 4 штуки smile
Код
<div id="slider-wrap">
<div id="slider">
<a id="prewbutton" href="#"><</a>
<a id="nextbutton" href="#">></a>
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
<img src="img/001.jpg" width="640" height="360">
</div>
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
<img src="img/002.jpg" width="640" height="360">
</div>
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none">
<img src="img/003.jpg" width="640" height="360">
</div>
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block">
<img src="img/004.jpg" width="640" height="360">
</div>
</div>
<div class="sli-links">
<span class="control-slide">0</span>
<span class="control-slide">1</span>
<span class="control-slide">2</span>
<span class="control-slide active">3</span>
</div>
</div>
Категория: jQuery | Просмотров: 6101 | Добавил: Samosval |Рейтинг: 3.5/6


Всего комментариев: 10
avatar
8 Guano • 16:35, 08.02.2015
за урок спасибо а вот ссылка битая
avatar
1
9 Samosval • 19:36, 08.02.2015
Спасибо за сигнал, архив перезалит
avatar
10 Guano • 01:25, 09.02.2015
всегда пожалуйста! И спасибо за быструю реакцию cool
avatar
7 pauLL • 08:55, 01.02.2015
То что доктор прописал!
avatar
3 konyaalla • 14:59, 16.09.2014
скажите, а если два слайдера на сайте?? они показывают одно и тоже хотя я class slider уже как slider2
avatar
0
4 Samosval • 18:09, 16.09.2014
Не могу сказать,не пробывал.Засчет классов конечно должно изменятся содержимое.
avatar
0
5 Samosval • 18:13, 16.09.2014
Теперь обьясню,как вы заметили есть в Jquery переменная $('.slide').css( попробуйте ее изменить на иную,к примеру в Вашем случае $('.slider2').css(
avatar
0
6 Samosval • 18:16, 16.09.2014
И не забудьте изменить див на выводе <div id="slider2">
avatar
1 Smile • 22:14, 16.09.2013
Спасибо ОГРОМНОЕ!!!
Пересмотрел кучу уроков как делать слайдер и только Ваш мне помог!!!
Я наконец-то понял алгоритм и сделал домашку)))
avatar
2 Samosval • 19:45, 23.10.2013
Пожалуйста,заходите!
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика