VPF::определить положение элемента в карусели

beShur

Дата 8.1.2012, 18:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 6.3.2007

Репутация: нет
Всего: нет

Здравствуйте.

Делаю карусель для слайдера MovingBoxes (вместо точек - маленькие картинки).
В общем, есть ряд картинок, они все в div'е ".mb-controls" с большой шириной.
Хочу сделать так, чтобы выделенный элемент всегда был по центру, если это не конец и не начало слайдера.
Положение регулируется сдвигом карусели (right) в div'е с overflow: hidden
Вопрос в том, как высчитать такой сдвиг, чтобы выделенный элемент всегда отстоял от правого края на половину ширины контейнера.
Как определить, что осталось меньше половины до конца картинок, чтобы перестать двигать карусель?

Буду очень признателен любым советам.

Есть такой код, он держит выделенный элемент у правого края-2 картинки:

Код


    boxwidth = 56; // ширина одной картинки
    half = $('.mb-wrapper').width()/2; // половина ширины контейнера. Контейнер 940 пкс.
    boxeswide = $('.mb-wrapper').width()/boxwidth; // сколько в ширину картинок помещается в контейнере

//     я считаю для удобства картинками, а не их шириной. Потом нахожу, собственно, ширину

    $('.mb-slider').bind('completed.movingBoxes',function(e, slider, tar){ // событие "изменение"
        hidden_width = slider.curPanel - boxeswide; // это правый край
        if ( hidden_width > 0) {
            var right_move = hidden_width*boxwidth;
            if ($(".mb-controls").css("right") > right_move) {
                    right_move = right_move - boxwidth*2; // если двигаемся вперед, то нужно оставить две картинки в запасе
            } else {
                    right_move = right_move + boxwidth*2; // если двигаемся назад, то нужно оставить две картинки в запасе
            }
            $(".mb-controls").animate({
                right: right_move // сдвигаем карусель
            }, 500);
        } else {            
            $(".mb-controls").animate({
                right: 0 // если начало, то не сдвигаем
            }, 500);
        }
    });

Это сообщение отредактировал(а) beShur - 8.1.2012, 18:15

beShur

Дата 8.1.2012, 23:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 6.3.2007

Репутация: нет
Всего: нет

Уже сам разобрался.

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

Код


      boxwidth = 56;
      var right_move = 0;
      $('.mb-slider').bind('completed.movingBoxes',function(e, slider, tar){
          boxeswide = $('.mb-wrapper').width()/(boxwidth);
          half = boxeswide/2;
          all_thumbs = $('.mb-controls a').length; // сколько всего картинок в карусели
          hidden_width = slider.curPanel - half; // hidden_width - это сколько картинок перед текущей, т.е. сколько спрятано. убираем первую половину, которую двигать не надо.
          if ( hidden_width > 0) { // Проверяем не в первой ли половине текущий элемент, потому что ее сдвигать не надо
              if (hidden_width < (all_thumbs-boxeswide)) { // Проверяем не в последней ли половине текущий элемент
                  right_move = hidden_width; // сдвигаем на столько-то картинок
              } else {
                  right_move = all_thumbs - boxeswide - 0.1; // если в последней половине (то есть, почти у края), то пододвигаем карусель до правого края
              }
              right_move = (right_move+0.3)*boxwidth;
          } else {
              right_move = 0;
          }
          $(".mb-controls").animate({
              right: right_move // вперед )
          }, 500);
      });

Это сообщение отредактировал(а) beShur - 8.1.2012, 23:46

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »