Создание красивого и доступного слайдшоу с помощью jQuery

создание слайдшоу

От автора: из этого исчерпывающего учебника по веб-разработке вы узнаете, как создать удобный и доступный виджет слайдшоу для своего сайта с помощью HTML, CSS и JavaScript (jQuery). В процессе создания вы увидите в действии концепцию Progressive Enhancement (прогрессивное улучшение).

Конечный результат

Для живой демонстрации виджета слайдшоу щелкните по изображению внизу.

создание слайдшоу

Скачиваем исходные файлы

Вы можете скачать исходные файлы этого учебника для изучения. Наряду с использованным в нем целым скриптом jQuery комплект исходных файлов содержит файл PSD для веб-разметки демонстрационной страницы под названием mockup-slideshow.psd, а также фоновые изображения CSS и вспомогательные файлы, используемые для создания слайдшоу.

скачать исходникидемо

Устанавливаем основы

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

Наша структура содержимого содержит div под названием #slideshow, который служит слайдшоу контейнером. Внутри него располагается другой div под названием #slideContainer, который содержит слайды, являющиеся div’ами с классом, установленным на .slide.

Блок 1: Разметка HTML

<!-- HTML для слайдшоу -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!—Контент слайда 1 располагается здесь -->
    </div>
    <div class="slide">
      <!—Контент слайда 2 располагается здесь. -->
    </div>
    <div class="slide">
      <!—Контент слайда 3 располагается здесь. -->
    </div>
    <div class="slide">
      <!—Контент слайда 4 располагается здесь. -->
    </div>
  </div>
</div>
<!-- HTML для слайдшоу -->

Ниже в примере 1 вы увидите, как браузеры с текстовым интерфейсом и браузеры, неспособные визуализировать CSS и JavaScript, увидят наше слайдшоу. Важно заметить, что весь контент легкодоступен; мы ничего не скрыли от пользователя, гарантируя, что каждый сможет увидеть содержимое нашего сайта.

Для левого и правого элементов управления (стрелок) здесь нет разметки, мы вставим ее в DOM позже при помощи JavaScript. Внесение их на уровне структуры содержимого сбивало бы с толку тех, у кого нет возможности поддерживать CSS или JavaScript.

Пример 1: HTML-структура контента слайдшоу

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

Назначаем слайдшоу стили

Следующим шагом к правильному дизайну является хороший набор стилей, учитывающих возможность того, что у пользователя отключен JavaScript.

В #slidesContainer мы устанавливаем свойство overflow (переполнение) на auto, так что когда наш контент выйдет за границы установленной высоты в 263px (высота наших слайдов), появятся полосы прокрутки.

Блок 2: #slidesContainer CSS

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}

Для устройства полосы прокрутки справа, которая появится, когда выключен JavaScript, нам нужно уменьшить ширину .slide класса div на 20px.

Блок 3: Класс CSS .slide

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:263px;
}

Без JavaScript’а наш контент все равно доступен; пользователи могут прокручивать вверх и вниз и смотреть наши слайды.

Пример 2: Слайдшоу без JavaScript’а

Как альтернативное решение вы можете назначить правилу стиля .slide свойство float:left; так что вместо прокручивания по вертикали пользователи смогут прокручивать слайды по горизонтали.

CSS для левого и правого элементов управления

Для некоторой экономии ресурсов визуализации JavaScript мы заявим правила стилей для левого и правого элементов управления, которые вставим в DOM через jQuery.

Они будут элементами <span>, так что мы заявляем свойство курсора и назначаем ему значение pointer для изменения указателя мыши в случае, когда пользователь проводит над элементами управления. Для того, чтобы скрыть из виду текст, мы применяем свойство text-indent, это способ замены фонового изображения в CSS.

Блок 4: Управление

/**
 * Правила стилей элементов управления слайдшоу.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Лучший раздел… JavaScript

Когда HTML и CSS уже на своих местах, пора развлечься. Чтобы сделать свое слайдшоу более интерактивным и анимированным, мы используем библиотеку jQuery.

Теория

Первое, что нам нужно сделать – «отменить» заявленные в CSS стили, имеющие отношение к сценарию, когда JavaScript выключен. Это включает объявление стилей CSS в JavaScript для #slidesContainer, чтобы убрать его полосу прокрутки. Вдобавок нужно изменить размер div’ов .slide до 560px, который мы уменьшили на 20px для подгонки полосы прокрутки. Нам также нужно сдвинуть div’ы влево так, чтобы они показывались рядом по горизонтали вместо того, чтобы громоздиться поверх друг друга по вертикали.

Затем, поработав с DOM, мы вставляем div под названием #slideInner, который обертывает все наши слайды и имеет ширину, равную общей ширине всех div’ов .slide.

Наконец, мы вставляем левый и правый элементы управления (с именами класса .control) для пользовательской навигации; делаем это в JavaScript, так что клиентские браузеры с выключенным JavaScript’ом их не увидят.
Вот для вашего внимания код JavaScript целиком, а попозже мы рассмотрим его в деталях.

Блок 5: Скрипт jQuery целиком

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Удалить полосу прокрутки в JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Обернуть все .slides в div #slideInner
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Установить ширину #slideInner равной общей ширине всех слайдов
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Вставить левый и правый элементы управления в DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Скрыть левый элемент управления при первой загрузке
  manageControls(currentPosition);

  // Создать слушатели события щелчка .controls
  $('.control')
    .bind('click', function(){
    // Определить новое положение
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Скрыть/показать элементы управления
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // manageControls: Скрывает и показывает элементы управления в зависимости от currentPosition
  function manageControls(position){
    // Скрыть левый элемент управления, если position – первый слайд
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Скрыть правый элемент управления, если position – последний слайд
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });

Создание нескольких объектов

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

currentPosition – это число, которое содержит текущее положение слайдшоу .slideWidth – это ширина каждого div’а .slide, фиксированная на 560px. Я решил объявить объект для селектора $(‘.slide’), чтобы наш код выглядел немного аккуратнее, но вы можете это пропустить и использовать в своем синтаксисе целый селектор ($(‘.slide’)).

Наконец мы определяем количество слайдов своего шоу, используя прием .length.

Блок 6: Переменные и константы

var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;

Удаление полосы прокрутки

Если сценарий работает, то у нашего пользователя включен JavaScript, так что мы удалим полосу прокрутки, установив свойство переполнения overflow slidesContainer’а на ‘hidden‘ — так оно заместит в нашем CSS объявление overflow:auto (смотри Блок 3).

Блок 7: Изменение значения свойства CSS overflow на скрытое (hidden)

$('#slidesContainer').css('overflow', 'hidden');

Вставляем div в DOM

Для перемещения своих слайдов влево и вправо мы применим свойство полей (подробнее о нем позже). Чтобы это сделать, нужно создать div, который обертывает все div’ы .slide, установить ему ту же ширину, что и общая ширина всех наших слайдов. Отрегулировав свойства полей этого div’а (позже), мы создадим эффект его движения влево и вправо.

Блок 8: Вставляем #slideInner в DOM способом .wrapAll()

slides
  .wrapAll('<div  id="slideInner"></div>')

Нам также нужно установить ширину #slideInner, вновь созданного div’а, на общую ширину всех div’ов .slide.

Блок 9: Вставляем #slideInner в DOM способом .wrapAll()

$('#slideInner').css('width', slideWidth * numberOfSlides);

Определение стилей слайдам в JavaScript’е

При включенном JavaScript нам нужно, чтобы слайды смещались влево и, таким образом, демонстрировались бок о бок. Также нужно установить их на ширину на 560px, поскольку у нас больше не будет полосы прокрутки.

Мы можем последовательно связать метод .css и метод .wrapAll(), использованным нами в Блоке 8.

Блок 10: Назначение div’ам .slide свойства CSS overflow:hidden

slides
  .css('overflow', 'hidden')
  .wrapAll('<div  id="slideInner"></div>')

Вставка в DOM элементов управления

Мы вставляем стрелки (элементы управления), манипулируя DOM; таким образом, пользователи, использующие браузеры с отключенным JavaScript’ом и скринридеры, не получат в итоге увечную структуру HTML с никуда не ведущими элементами управления, потому что без JavaScript’ щелкать на них будет бесполезно.

Мы делаем это с помощью способов .prepend() и .append(), которые вставляют строку HTML внутрь выбранного объекта(ов) (в данном случае выбран div #slideshow). Текст внутри элементов span не имеет значения, потому что они скрыты.

Блок 11: Вставляем элементы управления в DOM

$('#slideshow')
  .prepend('<span class="control" id="leftControl">Moves left</span>')
  .append('<span class="control" id="rightControl">Moves right</span>');

Управление левым и правым элементом-стрелкой при помощи функции

Для управления элементами-стрелками мы создаем функцию с названием manageControls, которая скрывает и показывает элементы управления, исходя из текущего положения слайдшоу.

На первом слайде мы скрываем левый элемент-стрелку, потому что предыдущий слайд отсутствует. На последнем слайде мы скрываем правый, потому что пользователь дошел до конца слайдшоу. Делается это при помощи способов jQuery .hide() и .show(), которые скрывают/показывают предшествующие выбранному элементы DOM.

Блок 12: Функция manageControls()

function  manageControls(position){
  // position==0 – это первый слайд
  if(position==0)  { $('#leftControl').hide(); }
  else { $('#leftControl').show(); }
    // numberOfSlides-1 – это последний слайд
  if(position==numberOfSlides-1) {  $('#rightControl').hide(); }
  else { $('#rightControl').show(); }
}      

Вызываем manageControls() в DOM

При загрузке первого скрипта нам нужно вызвать функцию manageControls() один раз для того, чтобы скрыть левый элемент управления. Сделать это легко, мы всего лишь передаем ей аргумент currentPosition, который должен в исходном положении быть на 0.

Блок 13: Вызываем manageControls() при загрузке скрипта (событие domready)

manageControls(currentPosition);

Привязка события щелчка к элементам управления

Последним шагом к сценарию слайдшоу jQuery является привязка событий к правому и левому элементам управления. Так, по сути, создаются «слушатели события», запускающие функции, когда пользователь щелкает на левый или правый элемент управления.

Блок 14: Привязываем слушатель события щелчка к классу .control

$('.control').bind('click',  function(){
  // Делать что-то при щелчке пользователя
});

Обновление значения currentPosition

Когда пользователь щелкает на элемент управления, мы обновляем значение переменной currentPosition: если щелкает на правую стрелку (с ID #rightControl), то мы прибавляем 1 к currentPosition; если на левую стрелку (с ID #lefControl), то вычитаем 1 из currentPosition. То, что вы видите внизу, называется ternary operator (трехместный оператор), это сокращенная запись для структур управления if/else.

Блок 15: Трехместный оператор для установки нового значения currentPosition

currentPosition = ($(this).attr('id')=='rightControl')
                  ?  currentPosition+1 : currentPosition-1;

Вызов manageControls() после обновления currentPosition

После настройки значения currentPosition мы снова вызываем manageControls() для того, чтобы скрыть или показать свои элементы управления в зависимости от нового положения слайда.

Блок 16: Вызов manageControls() внутри .bind

manageControls(currentPosition);

Анимируем слайды

Наконец, мы передвигаем #slideInner влево или вправо путем анимации значения его CSS-свойства margin-left. Левое поле – это отрицательная ширина слайдов, умноженная на текущее положение. Например, если мы переходим к слайду 3, то левое поле равно — 1120px.

Блок 17: Применение способа .animate для перехода свойства CSS margin-leftM

$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});

Резюме

В этом учебнике мы создали простой сценарий слайдшоу с помощью прочного HTML, CSS и JavaScript’а (jQuery). Для обеспечения работы виджета слайдшоу без CSS и JavaScript мы применили концепцию Progressive Enhancement (прогрессивное улучшение), что сделает наш скрипт доступным большинству сценариев браузеров.

Автор: Jacob Gube

Источник: http://sixrevisions.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (33)

  1. Петр

    Спасибо. Очень даже ничего. Может когда пригодится.

  2. Алексей

    Великолепный урок. Благодарю.

  3. Ришат

    Отличный урок. Наконец-то более-менее понятен принцип создания слайд-шоу. Спасибо.

  4. Сергей

    Я только создаю свой блог, сейчас как раз стоит вопрос о наполнении сайта контентом, ваш урок мне очень пригодится. Спасибо большое!

  5. Pocherk

    Отличный урок. Как раз собирался использовать нечто подобное на своем сайте

  6. Игорь

    Великолепно! Очень красиво, постараюсь у себя это реализовать. Спасибо!

  7. vistas

    Всё очень толково и по существу.Спасибо! Хотя и счас только доделываю сайт на локальном сервере пока..ИНформация вся очень важна и полезна! Спасибо!

  8. Gotvald

    Спасибо, интересно и полезно.

  9. Виталий

    Может, и понятно профессионалам. Я считаю, что самое лучшее, доступное для простых веб-мастеров слайд-шоу (фотогаллерея) — это Симпл Вьювер. Которая не требует большого времени и особых знаний для осуществления. У вас, Андрей, уроки для профессионалов. Будьте проще, как, например, Евгений Попов дает уроки для большинства веб-мастеров.

    • Андрей Кудлай

      На сайте представлены уроки для веб-мастеров с различным уровнем профессионализма, собственно, как и на сайте Е. Попова. Если этот урок Вам пока непонятен, можете обратиться к урокам попроще (они также есть на нашем сайте), а со временем вернетесь вновь к этому уроку.
      Просто, следуя Вашей логике, нужно выкладывать только простые уроки… но тогда ведь это совсем неинтересно будет людям с уровнем профессионализма повыше ;)

      • Антон

        Андрей, отличный урок! Если для кого-то такое является сложным, то я не знаю что они тут забыли. Я код jquery первый раз вижу и мне хватило только коментов в коде, чтобы разобраться.

        • Андрей Кудлай

          Согласен ;)
          Спасибо автору по имени Jacob Gube и, конечно же, Виктору и Андрею за качественный перевод.

  10. Ольга

    Ничего не понятно.

  11. Виталий

    Может что-то и непонятно, так можно не вникать в подробности: есть исходники — подправил дизайн и прочие параметры под свой сайт и порядок!

  12. светлана

    Кто наверное это понял и так все умеют делать а куда нам чайникам деваться как тут можно самостоятельно разобраться.Не могу не чего сказать нравится или нет, но мне тут одной не разобраться

    • Виктор Рог

      Светлана, не паникуйте. На сайте есть и уроки, которые не понять просто невозможно.

      Но мы ведь не можем каждую статью начинать с основ. Есть вещи, которые мы берем за исходный материал.

      Светлана, попробуйте поступить следующим образом:

      1. Изучите базовый курс по HTML&CSS:
      http://webformyself.com/category/tutorials/ico/

      2. Пройдите курс по созданию сайта с нуля:
      http://website.info-dvd.ru/

      3. Пройдите курс по рисованию дизайна сайта с нуля, его верстки и установки на CMS WordPress.
      http://webformyself.com/minikurs/

      4. После этого, Вам станет многое понятно.

      P.S. А в целом, Вы можете и купить наш платный инфо-продукт:
      http://webmaster.info-dvd.ru/

      Светлана, как видите, варианты есть. Нужно только чуточку Вашего желания и стремления.

      Скажите, а Вы сделали что-нибудь из вышеперечисленного?

      • Эдуард

        Когда впервые попал на Ваш сайт, так-же, как многие, думал:»Я никогда в жизни этого не пойму!!!!!»
        С тех пор прошло пол-года!
        Сделал 4 небольших сайта! Заработал на них первые деньги!
        Читая эту статью не только понимаю, о чём речь, но и легко могу изменить код под свои нужды!
        Советую не опускать рук, начать с азов, не поняв одного не переходить к другому!
        Авторам сайта огромное спасибо!!!!!

  13. Оксана

    Виктор, с большим удовольствием наблюдаю за Вашей работой, купила http://webmaster.info-dvd.ru/ проштудировала часть уроков пока понимала, как только возникли первые проблемы не смогла двинуться дальше и на вопросы ответов тоже не получила, подскажите как пробиваться дальше.
    А этот урок интересный наверняка , во всяком случае то, что сегодня очень бы пригодилось.
    С уважением

    • Андрей Кудлай

      Оксана, если у Вас возникли какие-то трудности Вы всегда можете задать вопросы в нашу службу поддержки. Если вопрос четко сформулирован и будет предполагать ответ, то мы обязательно Вам поможем :)

    • Виктор Рог

      Интересно, а куда Вы вопросы свои посылали?

      Мы постоянно проверяем почту. Причем 3 человека. Возможно Ваше письмо попало в СПАМ фильтр?

      Оксана, обязательно нам отпишите в суппорт:
      http://support.webformyself.com

  14. Eugene

    С точки зрения доброжелательности учитывать возможность того, что у пользователя отключен JavaScript наверное хорошо. Но не думаю, что даже после того как юзеру написать что нужен JavaScript, он его включит. Это так, к слову. Jquery хорош, но для казалось бы простого слайдщоу, его надо 50 строк! Жуть. Хотя другим кодом врядли понадобится меньше.)

  15. Лидия

    Благодарю за уроки. Надеюсь , что они мне пригодятся. Сейчас я здесь просто ничего не понимаю, да и времени нет, чтобы разобраться. Главное, что они у меня есть!

  16. Галина

    Спасибо! Надеюсь этот урок мне пригодится!

  17. Юрий

    Я не робот я Чайник и не знаю английского языка. В связи с этим мне не представляется возможным просмотр онлайн-видио по данному уроку. Прошу подскажите Чайнику:- выучить перед уроком английский язык или — есть другой способ переключить «мозги» с английского на русский.
    Честь имею, с уважением Юрий Марковский.

    • Виктор Рог

      А где здесь онлайн видео?

    • Pocherk

      Юрий, выучите сначала азы HTML и CSS. Этот урок явно не для Вас.

      А вообще для авторов сайта — небольшая рекомендация. В начале каждого урока, размещать уровень подоготовки тех, кому этот урок предназначен. Типа — для чайников, для знатоков, для профи и т.п.

      • Виктор Рог

        Принято. Спасибо за совет.

      • Юрий

        Вы абсолютно правы, к тому же мне не помешает вспомнить и английский. А по поводу урока — это не видио, а образец. Спасибо

  18. Михаил

    Спасибо за инфу. Попробую разобраться

  19. Valery

    Как вам такой вариант — siteacademy.ru/index.php/css/39-css/fast-hover-slideshow?

  20. Николай

    Можно так же ли сделать автоматическую смену слайдов?

  21. Михаил

    Не плохой слайдер, но пользуюсь вот этим обычно — : siteacademy.ru/index.php/css/42-how-to-create-a-fast-hover-slideshow-with-css3

  22. Кирилл

    За слайдер спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree