Slyweb
На разработку сайта! Скидки 50%!

jQuery слайдер

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

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

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

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

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

  • Код
  • Чистый код
  1.<div id="starconteiner">
  2.
  3.</div>

        

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

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

        

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

  • Код
  • Чистый код
  1.html {
  2. height: 100%;
  3. width:auto;
  4. }
  5. #starconteiner {
  6. text-align:left;
  7. position: relative;
  8. top:0px;
  9. display:block;
10. width: 400px; /* Major browsers other than IE 6 and below respect the importance immediately */
11. height:250px;
12. overflow:hidden;
13.}
14..slyshow{
15. position:absolute;
16. cursor:pointer;
17. border:2px solid #fff;
18.}
19..slycomment{
20. padding:10px;
21. background:#000;
22. position:absolute;
23. bottom:0%;
24. cursor:pointer;
25. width:300px;
26. height:30%;
27. z-index:555;
28. color:#fff;
29. font:1.5em Arial,sans-serif;
30. filter:alpha(opacity=50);
31. opacity:0.5;
32. -moz-border-radius: 0px 10px 0px 0px;
33. -webkit-border-radius: 0px 10px 0px 0px;
34. box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
35. -moz-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
36. -webkit-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
37.}
38.

        

Практика с jQuery!

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

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

        

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

  • Код
  • Чистый код
  1.ss.each(function(i){
  2.$(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i});
  3.});
  4.
  5.

        

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

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

  • Код
  • Чистый код
  1.ss.mouseover(function(){
  2...... основная функция слайдера ...
  3.});
  4.
  5.

        

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

  • Код
  • Чистый код
  1.if($(this).hasClass("slyactive")) return false
  2. $(".slycomment").hide();
  3. ss.removeClass("slyactive");
  4. $(this).addClass("slyactive");
  5.
  6. if($(this).hasClass("slyleft")) {
  7. $(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt'));
  8.
  9. $(this).nextAll(".slyshow").each(function(i){
10. $(this).removeClass("slyleft").addClass("slyright");
11. m = 40+(slykoef * ($(this).index()-1))+"0";
12. $(this).stop().animate({"margin-left":""+m+"px"},function(){
13. $(".slycomment").fadeIn("slow");
14. });
15.});
16.}
17.else {
18. if($(this).hasClass("slyright")) {
19.
20. $(this).removeClass("slyright").addClass("slyleft");
21. $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
22. m = (slykoef * ($(this).index()))+"0";
23. $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
24. $(this).stop().animate({"margin-left":""+m+"px"},function(){
25. $(".slycomment").fadeIn("slow");
26. });
27.
28. $(this).prevAll(".slyshow").each(function(i){
29. m = (slykoef * ($(this).index()))+"0";
30. $(this).stop().animate({"margin-left":""+m+"px"},function(){
31. $(".slycomment").fadeIn("slow");
32. });
33.
34. });
35. }
36.}
37.
38.

        

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

  • Код
  • Чистый код
  1.if($(this).hasClass("slyactive")) return false
  2.

        

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

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

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

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

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

17. else {
18. if($(this).hasClass("slyright")) {
19.
20. $(this).removeClass("slyright").addClass("slyleft");
21. $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
22. m = (slykoef * ($(this).index()))+"0";
23. $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
24. $(this).stop().animate({"margin-left":""+m+"px"},function(){
25. $(".slycomment").fadeIn("slow");
26. });
27.
28. $(this).prevAll(".slyshow").each(function(i){
29. m = (slykoef * ($(this).index()))+"0";
30. $(this).stop().animate({"margin-left":""+m+"px"},function(){
31. $(".slycomment").fadeIn("slow");
32. });
33.
34. });
35. }
36. }
37.

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

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

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

  1.//интервал
  2.function triggerclick() {
  3.ret = Math.floor(Math.random()*snum);
  4.$(".slyshow:eq("+ret+")").trigger("mouseover");
  5.}
  6.sc.mousemove(function(){
  7.clearInterval(myInterval)
  8.});
  9.sc.mouseleave(function(){
10.clearInterval(myInterval)
11.myInterval = setInterval(triggerclick,ssec*1000)
12.});
13.

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

  1.$(function(){
  2....слайдер...
  3.});
  4.

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

  • Код
  • Чистый код
  1.$(function(){
  2.//общ переменные
  3.var ssec = 5; // время перелистывания
  4.var snum = 6; // кол картинок
  5.var smargin = 40; // отсутупы между картинками в пикселях
  6.var sborder = 2; // рамка картинок в пикселях
  7.var smleft = (snum-1)*smargin;
  8.
  9.//
10.var slykoef = smargin / 10;
11.var sc = $("#starconteiner");
12.var ss = $(".slyshow");
13.$("#starconteiner").width(400+smleft);
14.//слайдер
15.var p = sc.position();
16.var myInterval = setInterval(triggerclick,ssec*1000)
17. sc.append("<div class='slycomment' style='opacity:0.5;filter:alpha(opacity=50);margin-left:"+(smleft+sborder)+"px'>"+$(".slyshow:last").attr('alt')+"</div>");
18. ss.addClass("slyleft");
19. ss.each(function(i){
20. $(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i});
21. });
22. ss.mouseover(function(){
23. if($(this).hasClass("slyactive")) return false
24. $(".slycomment").hide();
25. ss.removeClass("slyactive");
26. $(this).addClass("slyactive");
27.
28. if($(this).hasClass("slyleft")) {
29. $(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt'));
30.
31. $(this).nextAll(".slyshow").each(function(i){
32. $(this).removeClass("slyleft").addClass("slyright");
33. m = 40+(slykoef * ($(this).index()-1))+"0";
34. $(this).stop().animate({"margin-left":""+m+"px"},function(){
35. $(".slycomment").fadeIn("slow");
36. });
37. });
38. }
39. else {
40. if($(this).hasClass("slyright")) {
41.
42. $(this).removeClass("slyright").addClass("slyleft");
43. $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
44. m = (slykoef * ($(this).index()))+"0";
45. $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
46. $(this).stop().animate({"margin-left":""+m+"px"},function(){
47. $(".slycomment").fadeIn("slow");
48. });
49.
50. $(this).prevAll(".slyshow").each(function(i){
51. m = (slykoef * ($(this).index()))+"0";
52. $(this).stop().animate({"margin-left":""+m+"px"},function(){
53. $(".slycomment").fadeIn("slow");
54. });
55.
56. });
57. }
58. }
59.
60. });
61. //интервал
62. function triggerclick() {
63. ret = Math.floor(Math.random()*snum);
64. $(".slyshow:eq("+ret+")").trigger("mouseover");
65. }
66. sc.mousemove(function(){
67. clearInterval(myInterval)
68. });
69. sc.mouseleave(function(){
70. clearInterval(myInterval)
71. myInterval = setInterval(triggerclick,ssec*1000)
72. });
73. });
74.
75.

        

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

Футбол (англ. football, «ножной мяч»). В настоящее время самый популярный и массовый вид спорта в мире. Женщина юного возраста! Виноградная улитка  — наземный брюхоногий моллюск отряда лёгочных улиток семейства гелицид. Красота! Любовь — чувство, свойственное человеку, глубокая, самоотверженная привязанность к другому человеку... Стоп!

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


Александр Ермаков