jQuery слайдер

Здравствуйте уважаемые читатели! Наконец-то я вернулся из армии и теперь можно вновь заняться написанием статей о jQuery. Хотя за этот год их появилось достаточно больше количество, как всегда они мало раскрывают сущность jQuery, а носят поверхностный характер и тем более мало кто раскрывает секреты создания плагинов и учит правильно создавать собственные разработки на jQuery. Я же стараюсь объяснять всё в подробностях.

И так, начнём. Теория о jQuery слайдерах!

Все слайдеры так или иначе связаны с перемещением изображений внутри определенного контейнера (элемента DOM), некоторые основной целью имеют смену изображений в определенном порядке по заранее установленному интервалу времени, другие наоборот, смену изображений делаю в случайном порядке. По-моему мнению для каждого это дело вкуса. Мы же будем делать слайдер основываясь на следующих параметрах:

• случайная смена изображений по прошествии определённого времени;
• возможность смены картинок при наведении курсора и возобновление автоматической смены при отведении курсора;
• возможность максимальной настройки слайдера.

 

Теоретически Вам нужно представить контейнер в котором будут содержаться картинки наложенные друг на друга, с определенным смещением от правого края контейнера каждой картинки на расстояние, пропорционально зависящее от удаления каждой картинки от правого края контейнера. Как создать контейнер, очень просто, напишите:

<div id="starconteiner"> </div>

После того как мы создали контейнер с id. Нужно подумать как разместить в нём изображения таким образом, чтобы каждое из них находилось немного выше и правее предыдущего, чтобы из этого получились вкладки из изображений. Самым простым способом будет вставить изображения в контейнер и абсолютно позиционировать их относительно верхнего левого угла контейнера. То есть нам нужно дописать в контейнер следующее:

<div id="starconteiner"> <img class="slyshow" alt="Футбол (англ. football, «ножной мяч»). В настоящее время самый популярный и массовый вид спорта в мире." src="images/1.jpg" /> <img class="slyshow" alt="Женщина юного возраста!" src="images/2.jpg" /> <img class="slyshow" alt="Виноградная улитка — наземный брюхоногий моллюск отряда лёгочных улиток семейства гелицид." src="images/3.jpg" /> <img class="slyshow" alt="Красота!" src="images/4.jpg" /> <img class="slyshow" alt="Любовь — чувство, свойственное человеку, глубокая, самоотверженная привязанность к другому человеку..." src="images/5.jpg" /> <img class="slyshow" alt="Стоп!" src="images/6.jpg" /> </div>

Не забудьте о подключении css:

html { height: 100%; width:auto; } #starconteiner { text-align:left; position: relative; top:0px; display:block; width: 400px; /* Major browsers other than IE 6 and below respect the importance immediately */ height:250px; overflow:hidden; } .slyshow{ position:absolute; cursor:pointer; border:2px solid #fff; } .slycomment{ padding:10px; background:#000; position:absolute; bottom:0%; cursor:pointer; width:300px; height:30%; z-index:555; color:#fff; font:1.5em Arial,sans-serif; filter:alpha(opacity=50); opacity:0.5; -moz-border-radius: 0px 10px 0px 0px; -webkit-border-radius: 0px 10px 0px 0px; box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478; -moz-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478; -webkit-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478; }

Практика с jQuery!

Для того, чтобы изображения находились на равно - пропорциональном расстоянии относительно левого края контейнера, необходимо использовать jQuery:

$(function(){ //общ переменные var ssec = 5; // время перелистывания var snum = 6; // кол картинок var smargin = 40; // отсутупы между картинками в пикселях var sborder = 2; // рамка картинок в пикселях var smleft = (snum-1)*smargin; // var slykoef = smargin / 10; var sc = $("#starconteiner"); var ss = $(".slyshow"); $("#starconteiner").width(400+smleft); //слайдер var p = sc.position(); var myInterval = setInterval(triggerclick,ssec*1000) sc.append("<div class='slycomment' style='opacity:0.5;filter:alpha(opacity=50);margin-left:"+(smleft+sborder)+"px'>"+$(".slyshow:last").attr('alt')+"</div>"); ss.addClass("slyleft"); ss.each(function(i){ $(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i}); });

Некоторые переменные, например slykoef пока не объясняются, здесь лишь Вам нужно уяснять что все изображения, смещаются от левого края благодаря этим строчкам:

ss.each(function(i){ $(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i}); });

В 19 строке метод jquery each предназначен для обхода всех изображений - их смещение в лево на значение сохраненное в переменную slykoef, так же изображения находятся в стеке в котором каждое последующее изображение имеет свойство z-index увеличенное ровно на единицу.

Итак, что мы имеем блок со смёщенными изображениями, теперь нужно добавить функциональности и интерактивности, - создадим эффект наведения курсора на изображения:

ss.mouseover(function(){ ..... основная функция слайдера ... });

Данный отрезок кода позволит нам запускать центральную часть слайдера, то есть весь нижеуказанный код:

if($(this).hasClass("slyactive")) return false $(".slycomment").hide(); ss.removeClass("slyactive"); $(this).addClass("slyactive"); if($(this).hasClass("slyleft")) { $(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt')); $(this).nextAll(".slyshow").each(function(i){ $(this).removeClass("slyleft").addClass("slyright"); m = 40+(slykoef * ($(this).index()-1))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); } else { if($(this).hasClass("slyright")) { $(this).removeClass("slyright").addClass("slyleft"); $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft"); m = (slykoef * ($(this).index()))+"0"; $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt')); $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); $(this).prevAll(".slyshow").each(function(i){ m = (slykoef * ($(this).index()))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); } }

Разберём его подробно, первая строка:

if($(this).hasClass("slyactive")) return false

Данный отрезок кода предназначен для проверки наведён ли курсор на текущее изображение или нет, если курсор навёден на текущее изображение, то мы запрещаем выполнение каких-либо действий. Если же это не текущее изображение, то идём дальше - три нижеуказанные строки кода помечают активное изображение и скрывают комментарий, чтобы его плавно отобразить в дальнейшем:

$(".slycomment").hide(); ss.removeClass("slyactive"); $(this).addClass("slyactive");

По сути, данный отрезок является центральным в понимании работы слайдера, все изображения могут быть помечены либо классом slyleft, либо slyright, в зависимости от этого происходит смещение изображений от текущего активного изображения, если изображения имеют класс slyleft, то все находящиеся от активного изображения справой стороны переместятся вправо и получат класс slyright, 7 строка размещает комментарий, но пока его не отображает, это будет сделано в 13 строке, и, как вы видите, с 9 строки по 13 происходит эффект анимации изображений, то есть изображения перемещаются слева на право благодаря функции animate, которою вы можете наблюдать в 12 строке:

if($(this).hasClass("slyleft")) { $(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt')); $(this).nextAll(".slyshow").each(function(i){ $(this).removeClass("slyleft").addClass("slyright"); m = 40+(slykoef * ($(this).index()-1))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); }

С 17 строки располагается противоположный метод, для изображений с классом slyright, если Вы наводите курсор на данные изображения все изображения с классом slyright будут перемещены справа на лево с одновременной сменой класса с slyright slyleft. В отличие от предыдущего кода данное условие дополнено строками :

else { if($(this).hasClass("slyright")) { $(this).removeClass("slyright").addClass("slyleft"); $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft"); m = (slykoef * ($(this).index()))+"0"; $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt')); $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); $(this).prevAll(".slyshow").each(function(i){ m = (slykoef * ($(this).index()))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); } }

В отличие от предыдущего кода данное условие дополнено строками, которые разворачивают не только изображения, находящиеся с права от активного изображения, но и само активное изображение смещает влево:

$(this).removeClass("slyright").addClass("slyleft"); $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft"); m = (slykoef * ($(this).index()))+"0"; $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt')); $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); });

Можно сказать что всё, но есть несколько методов которые создают автоматическую смену изображений по истечении заранее установленного времени в секундах, конечно, создать их возможно только используя методы javascript setInterval и clearInterval. В данных строках создана функция triggerclick(), запускающая событие mouseover, для изображения в случайном порядке. Случайный порядок создаётся в 3 строке. Функции в 6 и 9 строках являются обработчиками событий mousemove и mouseleave, их значение в следующем - если мы наводим на слайдер курсор, то интервал должен быть удалён - строка 7, если отводим от слайдера, то интервал должен быть вновь создан - строка 11. Удалять и создавать интервалы нужно всегда, так в противном случае будут запущены нескольку копий интервалов, что будет неверно и приведёт с цикличности запуска смены изображений.

//интервал function triggerclick() { ret = Math.floor(Math.random()*snum); $(".slyshow:eq("+ret+")").trigger("mouseover"); } sc.mousemove(function(){ clearInterval(myInterval) }); sc.mouseleave(function(){ clearInterval(myInterval) myInterval = setInterval(triggerclick,ssec*1000) });

Ну вот можно сказать и всё, только осталось весь указанный код обернуть в контейнер jQuery:

$(function(){ ...слайдер... });

После чего у Вас должен получиться плагин на jQuery который может стать основной для Ваших собственных разработок, а следовательно для продвижения вашего сайта или блога:

$(function(){ //общ переменные var ssec = 5; // время перелистывания var snum = 6; // кол картинок var smargin = 40; // отсутупы между картинками в пикселях var sborder = 2; // рамка картинок в пикселях var smleft = (snum-1)*smargin; // var slykoef = smargin / 10; var sc = $("#starconteiner"); var ss = $(".slyshow"); $("#starconteiner").width(400+smleft); //слайдер var p = sc.position(); var myInterval = setInterval(triggerclick,ssec*1000) sc.append("<div class='slycomment' style='opacity:0.5;filter:alpha(opacity=50);margin-left:"+(smleft+sborder)+"px'>"+$(".slyshow:last").attr('alt')+"</div>"); ss.addClass("slyleft"); ss.each(function(i){ $(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i}); }); ss.mouseover(function(){ if($(this).hasClass("slyactive")) return false $(".slycomment").hide(); ss.removeClass("slyactive"); $(this).addClass("slyactive"); if($(this).hasClass("slyleft")) { $(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt')); $(this).nextAll(".slyshow").each(function(i){ $(this).removeClass("slyleft").addClass("slyright"); m = 40+(slykoef * ($(this).index()-1))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); } else { if($(this).hasClass("slyright")) { $(this).removeClass("slyright").addClass("slyleft"); $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft"); m = (slykoef * ($(this).index()))+"0"; $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt')); $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); $(this).prevAll(".slyshow").each(function(i){ m = (slykoef * ($(this).index()))+"0"; $(this).stop().animate({"margin-left":""+m+"px"},function(){ $(".slycomment").fadeIn("slow"); }); }); } } }); //интервал function triggerclick() { ret = Math.floor(Math.random()*snum); $(".slyshow:eq("+ret+")").trigger("mouseover"); } sc.mousemove(function(){ clearInterval(myInterval) }); sc.mouseleave(function(){ clearInterval(myInterval) myInterval = setInterval(triggerclick,ssec*1000) }); });

А вот и визуальный результат:

Данный слайдер распространяется на данном сайте бесплатно и находится в отдельном разделе(slyshow), где Вы можете скачать его полностью в zip архиве!