Здравствуйте уважаемые читатели! Наконец-то я вернулся из армии и теперь можно вновь заняться написанием статей о 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:
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. |
А вот и визуальный результат:
Данный слайдер распространяется на данном сайте бесплатно и находится в отдельном разделе(slyshow), где Вы можете скачать его полностью в zip архиве!
1.1
Александр
Картинки не кликабельны, носят лишь информативный характер, но это не трудно сделать.