На этом шаге мы рассмотрим реализацию прокрутки по щелчку мыши.

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

$(document).ready(function() {
  var spacing = 140;
  
  $('#featured-books').css({
    'width': spacing * 3,
    'height': '166px',
    'overflow': 'hidden'
  }).find('.covers a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 1000
  });

  var setUpCovers = function() {
    var $covers = $('#featured-books .covers a');

    $covers.unbind('click');

    // Левое изображение - сдвинуть вправо
    // (чтобы просмотреть изображения слева).
    $covers.eq(0)
      .css('left', 0)
      .click(function(event) {
        $covers.eq(2).css('left', 1000);
        $covers.eq($covers.length - 1)
          .prependTo('#featured-books .covers');
        setUpCovers();

        event.preventDefault();
      });

    // Правое изображение - сдвинуть влево
    // (чтобы просмотреть изображения справа).
    $covers.eq(2)
      .css('left', spacing * 2)
      .click(function(event) {
        $covers.eq(0).css('left', 1000);
        $covers.eq(0)
          .appendTo('#featured-books .covers');
        setUpCovers();

        event.preventDefault();
      });

    // Центральное изображение.
    $covers.eq(1)
      .css('left', spacing);
  };

  setUpCovers();

});

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

    Всего в нашем примере имеется шесть изображений (на которые программный код JavaScript будет ссылаться по порядковым номерам от 0 до 5). Видимыми являются изображения с порядковыми номерами 0, 1 и 2. Когда выполняется щелчок на изображении №0, мы должны выполнить сдвиг всех изображений на одну позицию вправо. Сначала мы сдвигаем за пределы области просмотра изображение №2 (вызовом .css('left',1000)), потому что после сдвига оно не должно оставаться видимым. Затем мы перемещаем последнее изображение (№5) в начало очереди (используя вызов .prependTo()). Это вызывает переупорядочение всех изображений, поэтому, когда снова будет вызвана функция setUpCovers(), элемент, который прежде был под №5, теперь будет элементом под №0, №0 станет №1, и №1 станет №2. Следовательно, имеющегося в данной функции программного кода, выполняющего позиционирование, вполне достаточно, чтобы переместить изображения в новые местоположения.

Рис.1. Перемещение изображений

    В случае щелчка на изображении №2 выполняется обратный процесс. На этот раз уже №0 покидает область видимости и перемещается в конец очереди. В результате №1 смещается в позицию с №0, №2 - в позицию с №1 и №3 - в позицию с №2, как показано на рисунке 1.

    Нам следует позаботиться о двух вещах, чтобы уберечь пользователя от аномалий взаимодействия:

1. Внутри обработчика события click нам нужно вызвать метод .ргеventDefault(), так как в разметке HTML изображения ссылаются на увеличенные версии. Без этого вызова браузер будет выполнять переход по ссылке, и мы никогда не сможем наблюдать эффект прокручивания.
2. В начале функции setUpCovers() необходимо отключить все обработчики события click, в противном случае по мере вращения карусели к одному и тому же изображению могут оказаться подключенными сразу несколько обработчиков.

    На следующем шаге мы рассмотрим добавление анимационного эффекта сдвига.

Предыдущий шаг Содержание Следующий шаг