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

jQuery - самое нужное! Карусель!

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. Что означает jQuery "карусель", по моему мнению, для главной страницы сайта данный плагин вполне подоходит, так как совмещает в себе эффективную рекламу и меню с выходом на основные страницы сайта, блога, например на страницы о новостях, при чем изображения размещенные с левой стороны "карусели" будут информировать читателя об основном сюжете новости на сайте. jQuery карусель использует простой плагин, состоящий из нескольких десятков строк jQuery кода.

Оглавление статьи "jQuery - самое нужное! Карусель!"

Шаг 1. Подключаем нужные нам js библиотеки!

"Карусель" будет выполнять функцию пролистывания блока с новостями, для этого нам нужно первоначально подключить следующие файлы jQuery:

Не забудьте про файл css - karusel.css, все css файлы должны находиться до подключаемых js библиотек.

Создайте файл, например index.html, после чего добавьте код, указанный ниже, в данный файл, при этом обратите внимание на правильность подключаемых файлов, - css файла karusel.css, js библиотек, первой должна быть jquery-1.5.min.js, после неё сам плагин karusel.js. Данные файлы должны находиться в том же каталоге, что и index.html.

  • Код
  • Ресурс
  1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.<html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Карусель на jQuery</title>
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  7. <meta http-equiv="Content-Language" content="ru" />
  8. <link rel="stylesheet" type="text/css" media="screen, projection, print" href="karusel.css"/>
  9.
10. <script type="text/javascript" src="jquery-1.5.min.js"></script>
11. <script type="text/javascript" src="karusel.js"></script>
12.
13.
14.
15. </head>
16.
17. <body>
18.
19.
20. <!-- Начало #карусель -->
21. <div class="main-hot">
22.
23. <span class="img" id="imgfortophot1">
24. <img src="1.jpg" alt="" />
25. <i class="overimg"></i>
26. </span>
27.
28.
29. <span class="img" id="imgfortophot2" style="display:none">
30. <img src="2.jpg" alt="" />
31. <i class="overimg"></i>
32. </span>
33.
34.
35. <span class="img" id="imgfortophot3" style="display:none">
36. <img src="3.jpg" alt="" />
37. <i class="overimg"></i>
38. </span>
39.
40.
41. <ul class="tophot">
42.
43. <li class="here" id="tophot1">
44. <a href="/news/1" title="Футбол (англ. football, «ножной мяч»).">Футбол - «ножной мяч»<span>10 февраля 2011 года, 17:00</span></a>
45. <i></i>
46. </li>
47.
48. <li id="tophot2">
49. <a href="/news/2" title="Женщина юного возраста!">Женщина юного возраста!<span>10 февраля 2011 года, 17:00</span></a>
50. <i></i>
51. </li>
52.
53. <li id="tophot3">
54. <a href="/news/3" title="Виноградная улитка — наземный брюхоногий моллюск">Виноградная улитка — наземный брюхоногий моллюск<span>9 февраля 2011 года, 13:50</span></a>
55.
56. <i></i>
57. </li>
58.
59. </ul>
60.
61. <!-- Окончание #карусель -->
62.
63. </div>
64.
65.
66.
67.
68. </body>
69.</html>

        

Шаг 2. Создаём html структуру!

Основным блоком является элемент div с классом "main-hot", в нём располагаются три изображения, первое не скрывается, остальные два скрываются с помощью css свойства display:none, справа располагается элемент ul с классом «tophot». Основной недостаток который вы почувствуете при работе с данным плагином, - это необходимость ручной настройки параметров высоты и ширины элементов, о чём я Вам расскажу сейчас. Просмотрите следующий css код:

  • Код
  • Ресурс
  1.body{
  2.font:10px/1 arial,sans-serif;
  3.}
  4./*==== настройки карусели ====*/
  5..main-hot {
  6.font:10px/1 arial,sans-serif;
  7.height:250px;
  8.width:697px;
  9.overflow:hidden;
10.margin-bottom:20px;
11.background:url(kr.png) repeat-x 0 0;
12.position:relative;
13.font-size:1.2em;
14.line-height:1.3;
15.border:1px solid #bfc0c0;
16.}
17..main-hot * {
18.margin:0;padding:0;
19.}
20..main-hot .img{
21.position:absolute;
22.top:0;
23.left:0;
24.width:397px;
25.overflow:hidden;
26.}
27.
28..tophot{
29.list-style:none;
30.position:absolute;
31.top:2px;
32.left:397px;
33.width:345px;
34.border-right:1px solid #e6e6e6;
35.height:250px;
36.z-index:5;
37.
38.}
39.
40..tophot li{
41.height:67px;
42.border-bottom:1px solid #d3d3d4;
43.padding:8px 8px 8px 21px;
44.font-size:1.25em;
45.line-height:1.2;
46.position:relative;
47.width:300px;
48.z-index:5;
49.}
50..tophot i{
51.display:none;
52.}
53.
54..tophot a{
55.text-decoration:none;
56.font-weight:bold;
57.}
58.
59..tophot li.here{
60.background:url(km.png) repeat-x 0 0;
61.color:#262626;
62.}
63..tophot li.here a{color:#262626;
64.text-shadow:#fff 0 1px 0;
65.}
66.
67..tophot li.here a span{
68.font-weight:normal;
69.}
70.
71..tophot li.here i{
72.
73.display:block;
74.width:14px;
75.height:21px;
76.position:absolute;
77.top:30px;
78.left:-13px;
79.background:url(karr.png) no-repeat 0 0;
80.z-index:5;
81.}
82..tophot li span{
83.
84.display:block;
85.font-size:.75em;
86.color:#848484;
87.padding-top:4px;
88.font-weight:normal;
89.}
90.
91.#tophot2{
92.position:absolute;
93.top:80px;
94.}
95.
96.#tophot3{
97.position:absolute;
98.top:164px;
99.}
100.

        

Все элементы жёстко зафиксированы, тот же основной контейнер имеет свойства height:250px и width:697px, изображения имеют фиксированный размер ширины width:397px. Но больше всего Вам придется повозиться с элементами li, поскольку изменяя высоту изображений, либо изображения будут обрезаться, либо непропорционально смотреться элементы li. Поэтому вам нужно рассчитывать высоту элементов li исходя из формулы v = heightofmain-hot/col, где v - высота, heightofmain-hot - высота всего контейнера, col - количество элементов li. При этом для второго и последующего элемента li нужно будет задать свойство top, для его смещение относительно верха контейнера, например, если высота контейнера равна 300 px(строка 8) , то размеры элементов li будут по 100 px, при этом смещение второго и третьего элемента li будт 100px(строка 93) и 200px(строка 98) соответственно.

Шаг 3. jQuery скарусель!

А вот и сам jQuery код, для начинающих он сложен, я не буду объяснять его весь, только настройки:

  • sensitivity - чувствительность смены изображений, чем выше тем медленнее анимация появления изображения (больше 10 не рекомендую указывать)
  • interval скорость смены изображений 100
  • timeout параметр, задающий количество секунд по прошествии которых будет возможна повторная анимация смены изображений, после того как пользователь проведет курсор над каждой вкладкой (рекомендую ранение равное 0)

Код jQuery никаких дополнительных возможностей не представляет, если Вам нужно автоматическая смена изображений даже если пользователь не наводит курсор, то Вы можете взять логику и код из статьи о слайдере slyshow- по адресу - jQuery слайдер "slyshow".

  • Код
  • Ресурс
  1.
  2.(function (a) {
  3. a.fn.hoverIntent = function (k, j) {
  4. var l = {
  5. sensitivity: 10,
  6. interval: 100,
  7. timeout: 0
  8. };
  9. l = a.extend(l, j ? {
10. over: k,
11. out: j
12. } : k);
13. var n, m, h, d;
14. var e = function (f) {
15. n = f.pageX;
16. m = f.pageY
17. };
18. var c = function (g, f) {
19. f.hoverIntent_t = clearTimeout(f.hoverIntent_t);
20. if ((Math.abs(h - n) + Math.abs(d - m)) < l.sensitivity) {
21. a(f).unbind("mousemove", e);
22. f.hoverIntent_s = 1;
23. return l.over.apply(f, [g])
24. } else {
25. h = n;
26. d = m;
27. f.hoverIntent_t = setTimeout(function () {
28. c(g, f)
29. }, l.interval)
30. }
31. };
32. var i = function (g, f) {
33. f.hoverIntent_t = clearTimeout(f.hoverIntent_t);
34. f.hoverIntent_s = 0;
35. return l.out.apply(f, [g])
36. };
37. var b = function (q) {
38. var o = (q.type == "mouseover" ? q.fromElement : q.toElement) || q.relatedTarget;
39. while (o && o != this) {
40. try {
41. o = o.parentNode
42. } catch (q) {
43. o = this
44. }
45. }
46. if (o == this) {
47. return false
48. }
49. var g = jQuery.extend({}, q);
50. var f = this;
51. if (f.hoverIntent_t) {
52. f.hoverIntent_t = clearTimeout(f.hoverIntent_t)
53. }
54. if (q.type == "mouseover") {
55. h = g.pageX;
56. d = g.pageY;
57. a(f).bind("mousemove", e);
58. if (f.hoverIntent_s != 1) {
59. f.hoverIntent_t = setTimeout(function () {
60. c(g, f)
61. }, l.interval)
62. }
63. } else {
64. a(f).unbind("mousemove", e);
65. if (f.hoverIntent_s == 1) {
66. f.hoverIntent_t = setTimeout(function () {
67. i(g, f)
68. }, l.timeout)
69. }
70. }
71. };
72. return this.mouseover(b).mouseout(b)
73. }
74.})(jQuery);
75.
76.
77.jQuery(function (d) {
78.
79. d(".tophot li").hoverIntent(function () {
80. if (d(this).hasClass("here")) {} else {
81. d(".tophot li").removeClass("here");
82. d(this).addClass("here");
83. bem = d(this).attr("id");
84. d(".main-hot .img:visible").fadeOut(300, function () {});
85. d("#imgfor" + bem).fadeIn(300)
86. }
87. }, function () {});
88.
89.
90.});

        

Шаг 4. Смотрим результат!

Шаг 5. Авто карусель!

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

  • Код
  • Чистый код
  1. /*
  2.Слайдер на jQuery
  3.С поддержкой автоматической смены изображений
  4.www.slyweb.ru
  5.*/
  6.
  7.jQuery(function (d) {
  8. parametr = {
  9. auto:false, // true - в случайном порядке, false - в порядке возрастания
10. start:0, // исходное изображение при автосмене(0,1,2)
11. intensiv:5 // скорость интервала (5 сек)
12. }
13. d(".tophot li").mouseover(function () {
14. if (d(this).hasClass("here")) {} else {
15. d(".tophot li").removeClass("here");
16. d(this).addClass("here");
17. bem = d(this).attr("id");
18. d(".main-hot .img:visible").fadeOut(300, function () {});
19. d("#imgfor" + bem).fadeIn(300)
20. }
21. }, function () {});
22.
23.var myInterval = setInterval(triggerclick,parametr.intensiv*1000);
24.
25.//интервал
26. function triggerclick() {
27. if(parametr.auto){
28. ret = Math.floor(Math.random()*3);
29. }
30. else {
31.
32. (parametr.start < 3) ? parametr.start = parametr.start + 1 : parametr.start = 0;
33. ret = parametr.start;
34. }
35.
36.
37. d(".tophot li:eq("+ret+")").trigger("mouseover");
38. }
39. d('.main-hot').mousemove(function(){
40. clearInterval(myInterval)
41. });
42. d('.main-hot').mouseleave(function(){
43. clearInterval(myInterval)
44. myInterval = setInterval(triggerclick,parametr.intensiv*1000)
45. });
46.});
47.

        

Слайдер поддерживает как автоматическую смену изображений, так и смену в случайном порядке, данная функция настраивается в js файле, архив можно скачать ниже.

Внимание! В jQuery 1.6.1 необходим заменить строку 14:
  • Код
  • Чистый код
 14.d(".main-hot-auto .tophot-auto li").mouseover(function () {

        
на следующи код:
  • Код
  • Чистый код
 14.d(".main-hot-auto .tophot-auto li").live('mouseover',function () {

        


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