На этом шаге мы рассмотрим реализацию механизма отображения ярлыков.

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

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

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

  var $leftRollover =$('<img/>')
    .attr('src', 'images/left.gif')
    .addClass('control')
    .css('opacity', 0.6)
    .css('display', 'none');
  var $rightRollover =$('<img/>')
    .attr('src', 'images/right.gif')
    .addClass('control')
    .css('opacity', 0.6)
    .css('display', 'none');
  var $enlargeRollover =$('<img/>')
    .attr('src', 'images/enlarge.gif')
    .addClass('control')
    .css('opacity', 0.6)
    .css('display', 'none');

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

  function createControl(src) {
    return $('<img/>')
      .attr('src', src)
      .addClass('control')
      .css('opacity', 0.6)
      .css('display', 'none');
  }
     
  var $leftRollover = createControl('images/left.gif');
  var $rightRollover = createControl('images/right.gif');
  var $enlargeRollover = createControl('images/enlarge.gif');

    В таблице стилей CSS для нашей страницы мы присвоили свойствам z-index этих элементов значение, которое больше значения этого же свойства у изображений, и предусмотрели абсолютное их позиционирование, чтобы ярлыки могли накладываться на изображения:

#featured-books .control {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
}

    Для всех ярлыков используется один и тот же класс control, из-за чего может появиться соблазн определить значение свойства opacity этого класса непосредственно в таблице стилей CSS. Однако прозрачность элементов не во всех браузерах обрабатывается одинаково; в Internet Explorer 60% уровень непрозрачности устанавливается как filter: alpha(opacity=60). Вместо того чтобы бороться с этими различиями, мы установим значение свойства opacity с помощью метода .css() из библиотеки jQuery, который позволяет обойти эту несовместимость браузеров.

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

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

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

        event.preventDefault();
      }).hover(function() {
        $leftRollover.appendTo(this).show();
      }, function() {
        $leftRollover.hide();
      });

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

        event.preventDefault();
      }).hover(function() {
        $rightRollover.appendTo(this).show();
      }, function() {
        $rightRollover.hide();
      });

    // Центральное изображение.
    $covers.eq(1)
      .css('left', spacing)
      .hover(function() {
        $enlargeRollover.appendTo(this).show();
      }, function() {
        $enlargeRollover.hide();
      });
  };

    Как и в случае с событием click выше, мы отключаем обработчики событий mouseenter и mouseleave в самом начале функции setUpCovers(), чтобы не возникло ситуации подключения нескольких обработчиков события к одному и тому же элементу. Здесь мы использовали другую особенность метода .unbind(): можно отключить обработчики сразу для нескольких событий, если перечислить в вызове метода типы событий через пробел.

    Почему mouseenter и mouseleave? Когда подключение обработчиков события производится с помощью метода .hover(), библиотека jQuery выполняет подключение к двум разным событиям. Первая функция, переданная методу, подключается как обработчик события mouseenter, а вторая - как обработчик события mouseleave. Поэтому, чтобы отключить обработчики, которые были подключены с помощью метода .hover(), нам необходимо отключить события mouseenter и mouseleave.

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

Рис.1. При наведении указателя мыши поверх изображения будет появляться соответствующий ярлык

    На следующем шаге мы рассмотрим увеличение изображения.

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