От автора: Многие назовут эту статью «баяном», так как из интернета так и сыпятся различные плагины слайдеров и многие из них бесплатные. Но тут мы вспомним одно из приоритетных правил программиста: «Не стесняйся изобретать велосипед». Это лучший способ досконально разобраться в принципе работы приложения.
Я собственно сам решил разобраться в этой теме и начал писать слайдер с нуля, так и появился материал статьи, которую вы читаете.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Что мы хотим получить?
Я решил усложнить себе и вам задачу по программированию, чтобы максимально упростить эксплуатацию приложения.
Нам нужно, чтобы для активации слайдера достаточно было сделать див определённого класса и просто вложить в него нужные img картинки.
Нам нужно, чтобы слайд открывался поверх прошлого.
Нам нужно чтобы слайд красиво открывался по кусочкам.
Нам нужно оформить слайдер так, чтобы люди залипали и как зомби кликали по кнопочкам.
Принцип работы планируемого приложения
При загрузке страницы, скрипт считает количество картинок в диве слайдера и создаёт столько же слайдов и присваивает им уникальные id. В слайдах скрипт создаёт 4 фрагмента, в которых соответствующая картинка используется как фон, и фон этот расположен в каждом фрагменте так, чтобы из всех фрагментов собиралась наша картинка. Изначально скрипт делает все слайды невидимыми, кроме первого, первый он выводит тогда, когда прогружается его img оригинал. Скрипт присваивает слайдам атрибут dir, в котором он определяет статус слайда (новый, текущий, остальные). Первому слайду, при загрузке присваивается статус – «текущий», остальным – «остальные».
Так же при загрузке, скрипт вставляет после слайдера див для ссылок и набивает его ссылками, в соответствии с количеством картинок. Каждой ссылке в атрибут href вставляется уникальный id слайда, в соответствии с порядковым номером.
При клике по ссылке, скрипт находит слайд с id соответствующим хрефу ссылки, ставит ему статус – «новый» и выдавливает его на третий уровень по оси z. Затем фрагменты вызванного слайда исчезают, а сам слайд появляется и фрагменты по очереди начинают красиво вылизать. После появления, слайдер переходит на второй уровень по оси z и ему присваивается статус – «текущий», а прошлый переходит на первый и получает статус – «остальные».
После проделанного, скрипт возвращает спрайты ссылок в исходную, а спрайт кликнутой поднимает на 50%.
Вот и всё.
План DOM
HTML вёрстка
Вёрстка очень проста, так как мы планируем, как я уже говорил, максимально упростить процедуру подключения слайдера. Всё что нужно сделать – это подключить библиотеку jquery, подключить наш файл JavaScript, присоединить стили CSS, создать див с классом «myslider» и вставить в него наши картинки (Внимание! Картинки должны быть одного размера).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!-- Начало - голова документа --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content=""> <meta name="keywords" content=""> <!-- Подключаем стили CSS --> <link rel="stylesheet" href="css.css" type="text/css"/> <!-- Подключаем файл jquery --> <script src="js/jquery.js" type="text/javascript"></script> <!-- Подключаем наши скрипты --> <script src="js/js.js" type="text/javascript"></script> <title> </title> </head> <body> <!-- div all в котором находится всё содержимое страницы, я использую его для выравнивания страницы по центру --> <div class="all" align='center'> <h1>Красивый слайдер на jquery от Михаила Беляева,<br /> специально для <a href='//webformyself.com'>webformyself.com</a></h1> <!-- div myslider - это див, в который надо вставлять картинки, которые хотим отобразить в слайдере --> <div class="myslider"> <!-- те самые img, которые будут листаться --> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <!-- / те самые img, которые будут листаться --> <!-- / div myslider - это див, в который надо вставлять картинки, которые хотим отобразим в слайдере --> </div> <!-- / div all в котором находится всё содержимое страницы, я использую его для выравнивания страницы по центру --> </div> </body> </html> |
JavaScript
Я не просто так показываю JS до стилей CSS. Дело в том, что в файле CSS описаны стили элементов, которых нет в HTML вёрстке, эти объекты добавит скрипт.
Досконально изучите содержание JS файла! Каждое действие мной прокомментировано.
Вы должны понять принцип работы слайдера, чтобы легко его настраивать и дополнять.
Должен признаться, IE меня подставил с этим слайдером не по детски… Он нашёл какие-то ошибки в библиотеке jquery.
Для IE есть рабочий вариант — //mortalbonds.ru/stethem/
Он значительно проще, это было первое, что у меня получилось.
PS: Найдёте причину бага, пишите в комменты, буду очень благодарен!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
$(document).ready(function() { // проверяем загружен ли документ var sldimgl = $('.myslider img').size(); // вычисляем количество картинок для слайдера var linmx = sldimgl - 1; // уменьшаем количество на 1, так как при отображении порядкового номера, JS начинает с "0", а не с "1" $('.myslider').after("<div class='slnav' align='center'></div>"); // вставляем блок для ссылок, сразу после дива - слайдера var i = 0; for(var i=0;i <= linmx; i++) // начинаем цикл вставки дивов, которые и будут отображаться как картинки { var imgd = ".myslider img:eq(" + i + ")"; // определяем выборку картинки по порядковому номеру в соответствии с циклом var imid = "imid_" + i; // создаём уникальный id для картинки, в соответствии с циклом $(imgd).attr('id', "imid_" + i); // выбираем эту картинку и присваиваем ей созданный id $(imgd).load(function(){ // ждём пока браузер не прогрузит картинку var diid = $(this).attr('id'); // узнаём id картинки var imgsrc = $(this).attr('src'); // узнаём url картинки var sldw = $(this).width(); // узнаём ширину картинки var sldh = $(this).height(); // и высоту тоже узнаём var slfragw = sldw / 4; // делим ширину на четыре, чтобы определить ширину фрагмента слайда var div_id = "div_" + diid; // создаём id для дива слайда var slideoun = "<div rel='b0' class='slide' id='" + div_id + "' style='display:none; position:absolute; z-index:1;'></div>"; // создаём див слайда, присваивая ему определённые нами значения $('.myslider').prepend(slideoun); // вставляем только что созданный слайд $("#" + div_id).width(sldw); // присваиваем слайду ширину как у картинки $("#" + div_id).height(sldh); // присваиваем слайду высоту как у картинки // вот тут ВНИМАНИЕ!!! Следующая строка определяет фрагменты для слайда и присваивает им бэкграунд картинки. // это можно сделать циклом, но я не стал портить себе жизнь, так как фрагментов у меня всего 4. // смысл в том, что позиция бэкграунда зависит от порядкового номера фрагмента, чтобы вместе они выглядели как одна картинка var slfrag = "<div class='slfrag' style='background:url(" + imgsrc + ") no-repeat left top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 2 + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 3 + "px top;'></div>"; $("#" + div_id).append(slfrag); // вставляем фрагменты в слайд var thisimg = "#" + div_id; // строка для вызова слайда по id $('.slfrag').width(slfragw); // присваиваем фрагментам ширину $('.slfrag').height(sldh); // присваиваем фрагментам высоту }); } $('.myslider img:first').load(function() { // проверяем загружена ли первая картинка $('.slide:first').attr('rel','b1').fadeIn(200); // показываем её слайд и присваиваем его атрибуту рел значение b1, по этому атрибуту, слайдер узнаёт - является ли слайд текущим }); for(var i = 0; i <= linmx; i++) // запускаем цикл по созданию ссылок на слайды { if(i == 0) // узнаём не является ли слайд первым { var pos = "-20px"; // для ссылок мы используем спрайт, если ссылка ведёт на первый слайд то сдвигаем ей фон, } else { var pos = "top"; // если нет, то оставляем его на месте } // при вставке ссылки, мы присваиваем ей href, соответствующий id слайда, на который она ведёт $('.slnav').append("<a class='sldlink' href='div_imid_" + i + "' style='background:url(img/link.png) no-repeat center " + pos + ";'></a>"); } $('.sldlink').click(function(e) { // вылавливаем событие - клик по ссылке слайдера e.preventDefault(); // запрещаем браузеру переход по ссылке var item1 = $(this).attr('href'); // выдёргиваем href ссылки var item = '#' + item1; // делаем из него id if($(item).attr('rel') == 'b1') {} // проверяем не ведёт ли ссылка на текущий слайд. Если да, то курим else { // если нет, то работаем $(item + ' div').hide(); // прячем фрагменты этого слайда $(item).show(); // показываем сам слайд $(".slide[rel = 'b1']").css({'z-index':'2'}); // утапливаем прошлый слайд по оси z на второй уровень $(item).css({'z-index':'3'}).attr('rel','b2'); // выдавливаем наш слайд по оси z на третий уровень и присваиваем ему rel появляющегося слайда for(var i=0;i<=3;i++) // запускаем цикл появления фрагментов слайда { var del = i * 100; // переменная del устанавливает длину задержки появления фрагмента в миллисекундах if(i != 3) // проверяем не является ли фрагмент последним { $(item + ' div:eq(' + i + ')').delay(del).show(500); // если нет, то просто его открываем } else { $(item + ' div:eq(' + i + ')').delay(del).show(500, function() { // если да, то открываем его и... $(".slide[rel = 'b1']").hide().css({'z-index':'1'}).attr('rel','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему rel невидимого $(item).attr('rel','b1'); // нашему слайду делаем rel текущего $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную $(".sldlink[href='" + item1 + "']").css({'background':'url(img/link.png) no-repeat center -20px'}); // сдвигаем фон кликнутой ссылки вверх }); } } } }); }); |
CSS стили
Тут всё понятно…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* убиваем отступы */ * { margin:0px; padding:0px; } /* произвольные стили страницы */ h1 { font-family:Arial; font-size:24px; color:#707070; margin-top:30px; } a { text-decoration:none; color:#768c97; } a:hover { text-decoration:underline; color:#00b4ff; } /* тут я растягиваю страницу и выравниваю содержание по центру */ .all { width:100%; } /* стили дивы с картинками для слайдера */ .myslider { margin-top:50px; /* ширину и высоту надо задать такие же, как есть у ваших картинок */ width:600px; height:300px; /* всякие некроссбраузерные красотульки ))) */ padding:20px; box-shadow:0px 0px 50px #ccc; -moz-box-shadow:0px 0px 50px #ccc; -webkit-box-shadow:0px 0px 50px #ccc; } /* скрываем вложенные изображения, так как нам нужны только их атрибуты а не они сами */ .myslider img { display:none; } /* стили блока ссылок на картинки */ .slnav { width:600px; } /* стили самих ссылок на картинки */ .sldlink { margin:5px; display:inline-block; width:20px; height:20px; } /* выравниваем дивы - фрагменты изображения по левому краю */ .slfrag { float:left; } |
Вот и всё!
Для закрепления материала!
Я уверен, что если вы попробуете изменить или дополнить код, то вы полностью поймёте принцип его работы.
Задача 1
Увеличьте количество фрагментов слайда и скорость их появления.
Задача 2
Присвойте img атрибут description и выводите его при клике по ссылке в удобном для вас месте.
На этом все. Пишите Ваши вопросы, отзывы, пожелания в комментариях!
Автор: Беляев Михаил
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Комментарии (30)