От доста дълго време Гошето (Георги Калайджиев) ме кара да седна и да напиша урок за такъв слайдър и ето че той вече е факт. Разбира се има много подобни слайдъри или carousels (въртележки) в мрежата, но рядко се среща нещо, което да ти свърши работа на 100% и хем да е удобно, хем да е малко като код и т.н. Надявам се сами се досещате, че това не е най-великият скрипт, но със сигурност ще свърши работа на някой от вас.
Надявам се всичко надолу да е ясно, но ако имате въпроси не се притеснявайте да питате.
HTML
Файловата структура на този урок е идентична с тази на повечето уроци, които ще срещнете на сайта. Имаме директория CSS, в която са всички използвани css файлове. Аналогично на CSS директорията е и JS папката, в която стоят съответно всички JavaScript файлове. И още по-аналогично е IMG директорията, в която стоят всички изображения.
За изграждането на този слайдър или carousel ще използваме елемент (div), който е с id="carousel" и в който има друг елемент (div) с клас slides, в който пък стои неподреден списък (ul). Отделните слайдове (slides) се намират в <li></li> таговете на неподредения списък. Ето и HTML кода за по голяма яснота :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как да си направим Slider или Carousel с jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
</head>
<body>
<div id="carousel">
<div class="slides">
<ul>
<li><div class="slide img1"></div></li>
<li><div class="slide img2"></div></li>
<li><div class="slide img3"></div></li>
</ul>
<div class="clr"></div>
</div>
<div id="buttons">
<a href="#" class="prev_btn">назад</a>
<a href="#" class="next_btn">напред</a>
<div class="clr"></div>
</div>
<div class="frame_right_bg"></div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
Както стана ясно по-горе използвам два елемента (div) вложени един в друг. Интересното тук е, че първият елемент, който е с id="carousel" e позициониран винаги в центъра на екрана. Как става това ли? За повече информация прочетете Хоризонтално и вертикално центриране на елемент с CSS.
#carousel {
overflow:hidden;
position:absolute;
top:50%;
left:50%;
padding:11px;
width:578px;
height:158px;
margin:-90px 0 0 -300px;
background: transparent url(../img/frame.png) 0 0 no-repeat;
}
.slides {
overflow:hidden;
position:relative; /* ie overflow issue fix */
width:578px;
height:158px;
}
.frame_right_bg {
position:absolute;
top:0;
right:0;
height:180px;
width:12px;
background: transparent url(../img/frame_right_bg.png) 0 0 no-repeat;
}
.slides ul {position:relative;left:0;top:0;}
.slides li {float:left;width:578px;height:158px;}
#buttons { position:absolute;top:20px;right:20px; }
#buttons a { float:left; margin:0 0 0 10px; width:38px; height:16px; text-indent:-9999px; }
#buttons .prev_btn { background: transparent url(../img/prev_btn.png) 0 0 no-repeat; }
#buttons .next_btn { background: transparent url(../img/next_btn.png) 0 0 no-repeat; }
#buttons a:hover { background-position: 0 100%; }
.slide { width:578px;height:158px;}
.img1 { background: transparent url(../img/img1.png) top center no-repeat; }
.img2 { background: transparent url(../img/img2.png) top center no-repeat; }
.img3 { background: transparent url(../img/img3.png) top center no-repeat; }
JavaScript
Преди да обясним логиката, с която работи този скрипт обаче, трябва да се запознаем с два метода, които са ни нужни за изграждането на така наречената безкрайна въртележка или безкраен слайдър, а именно After и Before.
Тези методи са ни нужни, защото потребителят има две възможности:
- да кликне върху бутона "prev"
- да кликне върху бутона "next"
В резултат на които, когато потребителя кликне върху един от двата бутона скрипта наслагва първия или последния слайд съответно най-отпред или най-отзад в неподредения списък. И всъщност това е цялата идея. Разбира се има и автоматично сменяне на слайдовете скороста на което се определя от променливата "speed". По желание на Гошето автоматичното слайдване спира при натискането на бутоните "prev" и "next". Ето и самия JavaScript код:
$(document).ready(function() {
//Параметри
var speed = 3000;
var slide_speed = 500;
var run = setInterval('rotate()', speed);
//Взимаме широчината на обекта и пресмятаме стойност "left"
var item_width = $('.slides li').outerWidth();
var move_left_value = item_width * (-1);
//Пресмятаме общата широчина на всички елементи и я задаваме на обекта с клас ".slides"
$('.slides').css({'width' : ($('.slides li').size()) * item_width});
//Преместваме последния обект преди първия за да се подсигурим при евентуално кликане на бутона "назад"
$('.slides li:first').before($('.slides li:last'));
//Преместваме елемента по подразбиране на правилното му място,
//тъй като по-горе сме преместили последния елемент, като първи и вече елемента по подразбиране е втори
$('.slides ul').css({'left' : move_left_value});
//При кликване на бутона назад
$('a.prev_btn').click(function() {
//Изчисляваме правилната позиция на елемента
var left_move = parseInt($('.slides ul').css('left')) + item_width;
//Преместваме обекта ( :not(:animated) - преместваме само ако обекта не се анимира в момента )
$('.slides ul:not(:animated)').animate({'left' : left_move}, slide_speed,function(){
//Преместваме последния обект преди първия
$('.slides li:first').before($('.slides li:last'));
//Преместваме елемента по подразбиране на правилното му място
$('.slides ul').css({'left' : move_left_value});
});
//Прекъсване на функцията
return false;
});
//При кликване на бутона напред
$('a.next_btn').click(function() {
//Изчисляваме правилната позиция на елемента
var left_move = parseInt($('.slides ul').css('left')) - item_width;
//Преместваме обекта ( :not(:animated) - преместваме само ако обекта не се анимира в момента )
$('.slides ul:not(:animated)').animate({'left' : left_move}, slide_speed, function () {
//Преместваме последния обект преди първия
$('.slides li:last').after($('.slides li:first'));
//Преместваме елемента по подразбиране на правилното му място
$('.slides ul').css({'left' : move_left_value});
});
//Прекъсване на функцията
return false;
});
//Спираме автоматичното преместване
$('.slides').hover( function() {
clearInterval(run);
});
});
function rotate() {
$('a.next_btn').click();
}
$(document).keydown(function(e) {
switch (e.keyCode) {
case 37: $('a.prev_btn').click(); break;
case 39: $('a.next_btn').click(); break;
}
});
Това не е всичко, добавил съм едно малко подобрение, което се вижда в скрипта :
$(document).keydown(function(e) {
switch (e.keyCode) {
case 37: $('a.prev_btn').click(); break;
case 39: $('a.next_btn').click(); break;
}
});
Ако вече не сте се досетили какво е това, отговорът е : "Преместване на слайдовете със стрелките от клавиатурата".
| View DemoDownload |
Скриптът е тестван и работи на всички браузъри с изключение на някои ефекти, които се дънят под Internet Explorer 6. Ние от Fridaycode сме плътно зад идеята IE6 да бъде спрян точно заради причината, че спъва технологиите.
И още веднъж ако имате въпроси - насреща съм!
Loading ...
http://nivo.dev7studios.com/ ;)
Този slider е много як :), ще се радвам ако и аз успея да напиша нещо такова някой ден :)