Название не говорит, что девушкам здесь читать нечего. Вы можете заменить их любыми для Вас подходящими изображениями. Мы будем создавать в статье мини - презентацию, состоящую из трёх элементов списка с фоновым изображением, которое будет сменятся при наведении курсора на меню. Сменятся изображения будут с различным интервалом времени, для обеспечения определенного зрительного эффекта, что несомненно сделает Ваши страницы запоминающимися и привлекательными. Как ни странно, данный слайдер поддерживается Internet Explorer 6 и выше, конечно, все нормальные браузеры так же поддерживают его полностью.

Google Chrome 9+
Opera 10.5+
Firefox 4+
Safari 3.2+
Internet Explorer 6 +

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

HTML структура

Код
Чистый код

  1.             <div id="menuWrapper" class="menuWrapper bg1">
  2.                 <ul class="menu" id="menu">
  3.                     <li class="bg1" style="background-position:0 0;">
  4.                         <a id="bg1" href="#">jQuery</a>
  5.                         <ul class="sub1" style="background-position:0 0;">
  6.                             <li><a href="#">Это фреймовик</a></li>
  7.                             <li><a href="#">Это простота</a></li>
  8.                             <li><a href="#">Это скорость</a></li>
  9.                         </ul>
10.                     </li>
11.                     <li class="bg1" style="background-position:-166px 0px;">
12.                         <a id="bg2" href="#">slyweb.ru</a>
13.                         <ul class="sub2" style="background-position:-166px 0;">
14.                             <li><a href="#">Руководство jQuery</a></li>
15.                             <li><a href="#">Статьи</a></li>
16.                             <li><a href="#">Разработки</a></li>
17.                         </ul>
18.                     </li>
19.                     <li class="last bg1" style="background-position:-332px 0px;">
20.                         <a id="bg3" href="#">Контакты</a>
21.                         <ul class="sub3" style="background-position:-166px 0;">
22.                             <li><a href="#">Заказ услуг</a></li>
23.                             <li><a href="#">Связь</a></li>
24.                             <li><a href="#">и многое другое</a></li>
25.                         </ul>
26.                     </li>
27.                 </ul>
28.             </div>
29.

Листинг 1.

Суть в HTML такова - у нас есть контейнер с id menuWrapper", внутри которого есть три элемента списка - контейнеры (это элементы с id "bg1"), внутри которых расположены списки и ссылки. Каждый контейнер отображают фоновое изображение. С наведением курсора на ссылку, изображение будет плавно перемещаться за счет изменения свойства background-position (для этого используется плагин jquery.bgpos.js).

Три элемента - контейнера располагаются внутри общего для всех элементов контейнера - с id "menuWrapper". Его высота должна и ширина должны соответствовать размерам фоновым изображений, у нас это 500 и 339 пикселей. В общем css код не представляет больших сложностей для понимания. Ниже вы можете видеть его полностью.

CSS

Код
Чистый код

  1. .menuWrapper{
  2.     font-family: "Trebuchet MS", Arial, sans-serif;
  3.     font-size: 15px;
  4.     font-style: normal;
  5.     font-weight: normal;
  6.     text-transform:uppercase;
  7.     letter-spacing: normal;
  8.     line-height: 1.45em;
  9.     position:relative;
10.     margin:20px auto;
11.     height:339px;
12.     width:497px;
13.     background-position:0 0;
14.     background-repeat:no-repeat;
15.     background-color:transparent;
16. 	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
17.     border: 1px solid #B2B2B2;
18. 	background-color: #B2B2B2;
19. }
20. ul.menu{
21.     list-style:none;
22.     width:497px;
23. 	margin: 0;
24.     padding: 0;
25. }
26. ul.menu > li{
27.     float:left;
28.     width:165px;
29.     height:339px;
30.     border-right:1px solid #777;
31.     background-repeat:no-repeat;
32.     background-color:transparent;
33. }
34. ul.menu > li.last{
35.     border:none;
36. }
37. .bg1{
38.     background-image: url(../images/1.jpg);
39. }
40. .bg2{
41.     background-image: url(../images/2.jpg);
42. }
43. .bg3{
44.     background-image: url(../images/3.jpg);
45. }
46. ul.menu > li > a{
47.     float:left;
48.     width:165px;
49.     height:50px;
50.     margin-top:250px;
51.     text-align:center;
52.     line-height:50px;
53.     color:#ddd;
54.     background-color:#333;
55.     letter-spacing:1px;
56.     cursor:pointer;
57.     text-decoration:none;
58.     text-shadow:0px 0px 1px #fff;
59. }
60. ul.menu > li ul{
61.     list-style:none;
62.     float:left;
63.     margin-top:-161px;
64.     width:100%;
65.     height:111px;
66. 
67.     background-repeat:no-repeat;
68.     background-color:transparent;
69. 	margin-left: 0;
70. 	padding-left: 0;
71. 	
72. }
73. ul.menu > li ul li{
74.     display:none;
75. 
76. }
77. ul.menu > li ul.sub1{
78.     background-image:url(../images/bg1sub.png);
79. 	
80. }
81. ul.menu > li ul.sub2{
82.     background-image:url(../images/bg2sub.png);
83. }
84. ul.menu > li ul.sub3{
85.     background-image:url(../images/bg3sub.png);
86. }
87. ul.menu > li ul li a{
88.     color:#fff;
89.     text-decoration:none;
90.     line-height:30px;
91.     margin-left:20px;
92.     text-shadow:1px 1px 1px #444;
93.     font-size:11px;
94. }
95. ul.menu > li ul.sub1 li{
96.     display:block;
97. }
98. ul.menu > li ul li a:hover{
99.     border-bottom:1px dotted #fff;
100. }
101.

Листинг 2.

jQuery

Давайте лучше разберём подробней jQuery, он очень хорошо написан. Сначала я приведу его полностью, а ниже – разберу подробней, - по каждой строчке.

Код
Чистый код

  1.              $(function() {
  2.                 /* позиция активного <li> */
  3.                 var current = 0;
  4. 				
  5. 				var loaded  = 0;
  6. 				for(var i = 1; i <4; ++i)
  7. 					$('<img />').load(function(){
  8. 						++loaded;
  9. 						if(loaded == 3){
10. 							$('#bg1,#bg2,#bg3').mouseover(function(e){
11. 								
12. 								var $this = $(this);
13. 								/* если текущий элемент выбран и мы снова навели курсор на него */
14. 								if($this.parent().index() == current)
15. 									return;
16. 
17. 								/* в ином случае мы сохраняем текущий id в item 
18. 								(он будет bg1 или bg2 или bg3, в зависимости от активного элемента */
19. 								var item = e.target.id;
20. 
21. 								/*
22. 								суб меню 
23. 								перемещаемся с  лева на право если элемент суб меню первый или последний,
24. 								иначе справа на лево right->left
25. 								 */
26. 								 
27. 								if(item == 'bg1' || current == 2)
28. 									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
29. 										$(this).find('li').hide();
30. 									});
31. 								else
32. 									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
33. 										$(this).find('li').hide();
34. 									});
35. 
36. 								if(item == 'bg1' || current == 2){
37. 									/* перемещаемся с  лева на право если элемент суб меню первый или последний,
38. 									иначе справа на лево right->left */
39. 									$('#menu > li').animate({backgroundPosition:"(-500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
40. 									move(1,item);
41. 								}
42. 								else{
43. 									/* перемещаемся с  лева на право если элемент суб меню первый или последний,
44. 									иначе справа на лево right->left */
45. 									$('#menu > li').animate({backgroundPosition:"(500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
46. 									move(0,item);
47. 								}
48. 
49. 								/*
50. 								среднее суб меню то же должно пермещаться если мы переходим от крайних суб-меню,
51. 								движение будет слева на право или наоборот, в зависимости от суб - меню от 
52. 								которого мы перемещаемся
53. 								 */
54. 								 
55. 								if(current == 2 && item == 'bg1'){
56. 									$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-166px 0)"},300);
57. 								}
58. 								if(current == 0 && item == 'bg3'){
59. 									$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(166px 0)"},300);
60. 								}
61. 
62. 								
63. 								/* получаем текущий индекс родительского элемента для ссылки над котрой сработало событие mouseover */
64. 								current = $this.parent().index();
65. 								
66. 								/* отображаем текст суб меню и li элементы суб меню */
67. 							   
68. 								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
69. 									$(this).find('li').fadeIn();
70. 								});
71. 							});
72. 						}	
73. 					}).attr('src', 'images/'+i+'.jpg');
74. 				
75. 							
76.                 /*
77.                 если dir:1 - то движение слева на право
78.                 если dir:0 - то движение справа на лево
79.                  */
80.                 function move(dir,item){
81.                     if(dir){
82.                         $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
83.                         $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
84.                         $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
85.                             $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
86.                         });
87.                     }
88.                     else{
89.                         $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
90.                             $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
91.                         });
92.                         $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
93.                         $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},200);
94.                     }
95.                 }
96.             });
97.

Листинг 3.

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

Код
Чистый код

  1.              $(function() {
  2.               
  3.

После мы объявляем две переменные - var current и var loaded. Первая содержит индекс активного элемента – элемента, по которому провели курсором, а вторая содержит количество загруженных изображений.

Код
Чистый код

  1.  var current = 0;
  2. 				
  3. 				var loaded  = 0;
  4.

Когда я начинал изучать jQuery для меня было страшным смотреть на эти строчки, сейчас я понимаю, что это такое и для чего нужно, мы здесь загружаем на страницу объекты изображений в количестве трёх штук (у нас три элемента списка). Зачем загружать? Это нужно для того чтобы при манипуляции с элементами изображения уже были подгружены на страницу, мы их возьмём из кэша, представьте, если бы они не были подгружены, то пользователь сперва при первых манипуляциях ждал бы их полной загрузки, а затем они бы брались из кэша, что для нас неприемлемо, нам нужно чтобы изображения были подгружены до того как пользователь начнёт манипуляции со слайдером.

Код
Чистый код

  1. for(var i = 1; i <3; ++i)
  2. 					$('<img />').load(function(){
  3. 					
  4. 					.....
  5. 					
  6. 					}).attr('src', 'images/'+i+'.jpg');
  7.

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

Код
Чистый код

  1. 	++loaded;
  2. 						if(loaded == 3){
  3. 							$('#bg1,#bg2,#bg3').mouseover(function(e){
  4.

В следующих строчках мы сверяем текущий объект со значением переменной, если индекс текущего элемента и значение переменной совпадают, то мы не производим ни каких манипуляций, а просто возвращаем return.

Код
Чистый код

  1. var $this = $(this);
  2. 								/* если текущий элемент выбран и мы снова навели курсор на него */
  3. 								if($this.parent().index() == current)
  4. 									return;
  5.

В ином случае мы должны запустить наш код, чтобы фоновое изображение перемещалось, для этого передаём в переменную item текущий id, он нам пригодится для функции menu, о которой позже, так же он пригодится для установки класса для элемента li.

Код
Чистый код

  1. var item = e.target.id;
  2.

Но до того как начнётся выполнение функции menu мы должны назначить всем 3 элементам li класс с тем фоновым изображением которое привязано к id ссылки, нужно это для того чтобы в функции menu каждый раз менять новое фоновое изображение с эффектами анимации:

Код
Чистый код

  1. 		if(item == 'bg1' || current == 2)
  2. 									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
  3. 										$(this).find('li').hide();
  4. 									});
  5. 								else
  6. 									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
  7. 										$(this).find('li').hide();
  8. 									});
  9. 								if(item == 'bg1' || current == 2){
10. 									/* перемещаемся с  лева на право если элемент суб меню первый или последний,
11. 									иначе справа на лево right->left */
12. 									$('#menu > li').animate({backgroundPosition:"(-500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
13. 									move(1,item);
14. 								}
15. 								else{
16. 									/* перемещаемся с  лева на право если элемент суб меню первый или последний,
17. 									иначе справа на лево right->left */
18. 									$('#menu > li').animate({backgroundPosition:"(500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
19. 									move(0,item);
20. 								}
21. 								/*
22. 								среднее суб меню то же должно пермещаться если мы переходим от крайних суб-меню,
23. 								движение будет слева на право или наоборот, в зависимости от суб - меню от 
24. 								которого мы перемещаемся
25. 								 */
26. 								 
27. 								if(current == 2 && item == 'bg1'){
28. 									$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-166px 0)"},300);
29. 								}
30. 								if(current == 0 && item == 'bg3'){
31. 									$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(166px 0)"},300);
32. 								}
33. 								
34. 								/* получаем текущий индекс родительского элемента для ссылки над котрой сработало событие mouseover */
35. 								current = $this.parent().index();
36. 								
37. 								/* отображаем текст суб меню и li элементы суб меню */
38. 							   
39. 								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
40. 									$(this).find('li').fadeIn();
41. 								});
42.

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

Код
Чистый код

  1.                 /*
  2.                 если dir:1 - то движение слева на право
  3.                 если dir:0 - то движение справа на лево
  4.                  */
  5.                 function move(dir,item){
  6.                     if(dir){
  7.                         $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
  8.                         $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
  9.                         $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
10.                             $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
11.                         });
12.                     }
13.                     else{
14.                         $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
15.                             $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
16.                         });
17.                         $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
18.                         $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},200);
19.                     }
20.                 }
21.

Вкратце можно объяснить функцию menu следующим образом. C 82 по 84 строку мы смещаем фоновое изображение для каждого элемента с заданной скоростью и заданным значением смещения, то есть для первого li мы передвигаем фоновое изображение к «0», для второго к –«166px», для третьего к –«332px». В этом и заключается эффект анимации нашего слайдера. Помните, что эффекты создаются благодаря плагину jQuery Background Position( Alexander Farkas).

Код
Чистый код

  1.   $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
  2.                         $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
  3.                         $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
  4.                             $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
  5.                         });
  6.

В итоге вы можете увидеть кроссбраузерный результат (Google Chrome, Firefox, Opera, Safari, IE8, IE7):

Загрузить архивом "Слайдер на jQuery с уменьшенными изображениями".

Часть 2. Большие девушки!

Вы сможете сами создавать свои слайдеры, однако, давайте расмотрим пример с увеличением изображения до 800px, который более реален для для сайта визитки, ничего сложного в этом нет просто изменим размеры фото, чтобы их ширина для всех трёх стала равной 800px, а высота 542px. Изменили в фотошопе, тепереь давайте внесём изменения в html, css и js.

Изменения, в основном коснутся увеличения ширины и высоты элементов li.

Код
Чистый код

  1.   <li class="bg1" style="background-position:-166px 0px;">
  2.

Затем замените строку ...

Код
Чистый код

  1.  <ul class="sub2" style="background-position:-266px 0;">
  2.

Затем замените строку ...

Код
Чистый код

  1.   <li class="last bg1" style="background-position:-532px 0px;">
  2.

Затем замените строку ...

Код
Чистый код

  1.  <ul class="sub3" style="background-position:-266px 0;">
  2.

В css для тех же элементов замените высоту и ширину, а так же отступ от верха для ссылок.

Код
Чистый код

  1.  .menuWrapper{
  2.     font-family: "Trebuchet MS", Arial, sans-serif;
  3.     font-size: 15px;
  4.     font-style: normal;
  5.     font-weight: normal;
  6.     text-transform:uppercase;
  7.     letter-spacing: normal;
  8.     line-height: 1.45em;
  9.     position:relative;
10.     margin:20px auto;
11.     height:542px;
12.     width:797px;
13.     background-position:0 0;
14.     background-repeat:no-repeat;
15.     background-color:transparent;
16. }
17. ul.menu{
18.     list-style:none;
19.     width:797px;
20. }
21. ul.menu > li{
22.     float:left;
23.     width:265px;
24.     height:542px;
25.     border-right:1px solid #777;
26.     background-repeat:no-repeat;
27.     background-color:transparent;
28. }
29. ul.menu > li.last{
30.     border:none;
31. }
32. .bg1{
33.     background-image: url(../images/1.jpg);
34. }
35. .bg2{
36.     background-image: url(../images/2.jpg);
37. }
38. .bg3{
39.     background-image: url(../images/3.jpg);
40. }
41. ul.menu > li > a{
42.     float:left;
43.     width:265px;
44.     height:50px;
45.     margin-top:450px;
46.     text-align:center;
47.     line-height:50px;
48.     color:#ddd;
49.     background-color:#333;
50.     letter-spacing:1px;
51.     cursor:pointer;
52.     text-decoration:none;
53.     text-shadow:0px 0px 1px #fff;
54. }
55. ul.menu > li ul{
56.     list-style:none;
57.     float:left;
58.     margin-top:-180px;
59.     width:100%;
60.     height:110px;
61.     padding-top:20px;
62.     background-repeat:no-repeat;
63.     background-color:transparent;
64. }
65. ul.menu > li ul li{
66.     display:none;
67. }
68. ul.menu > li ul.sub1{
69.     background-image:url(../images/bg1sub.png);
70. }
71. ul.menu > li ul.sub2{
72.     background-image:url(../images/bg2sub.png);
73. }
74. ul.menu > li ul.sub3{
75.     background-image:url(../images/bg3sub.png);
76. }
77. ul.menu > li ul li a{
78.     color:#fff;
79.     text-decoration:none;
80.     line-height:30px;
81.     margin-left:20px;
82.     text-shadow:1px 1px 1px #444;
83.     font-size:11px;
84. }
85. ul.menu > li ul.sub1 li{
86.     display:block;
87. }
88. ul.menu > li ul li a:hover{
89.     border-bottom:1px dotted #fff;
90. }
91.

Для jQuery нужно изменить следующие строки листинга 3 (он выше находится):

Код
Чистый код

27. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
28. 	$(this).find('li').hide();
29. });
   ....
32. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
33. 										$(this).find('li').hide();
34 									});
....
39. $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
....
45. $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
.....
55. if(current == 2 && item == 'bg1'){
56. $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
57. }
58. if(current == 0 && item == 'bg3'){
59. $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
60. }
.....
82. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
83. $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
84. $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
85. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
86. });
...
89. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
90. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
91. });
92. $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
93. $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
...

Вот на этом всё! Смотрите, что мы имеем по адресу: Лучше посмотреть в новом окне.

Загрузить архивом "Слайдер на jQuery с увеличенными изображениями".

Заключение

Теперь Вы можете создавать собственные красивые и эффективные слайдеры благодаря Mary Lou и моему уроку.

Часть 1. jQuery и красивые девушки

HTML структура

CSS

jQuery

Часть 2. Большие девушки!

Заключение

Вместе с данной статьёй чаще читают следующее:

1

Евгений

1.1

Александр

2

Алексей

2.1

Александр

2.2

Алексей