Вопрос позиции JQuery? - PullRequest
Новая
       12

Вопрос позиции JQuery?

0 голосов
/ 02 ноября 2018

Итак, я строю небольшую галерею в jQuery. 

var picwidth = $('.gallery-window ul li').width();
var left1 = $('.gallery-window ul').position().left;
var length = $('.gallery-window ul li').length;
var picnum = 1;

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

Теперь код для кнопки «следующий» следующий: 

$('.gallery-next').click(function() {
  if (picnum === length) {
  $('.gallery-window ul').css("left", "0px").animate({left: left1 -= picwidth}, 500);
    picnum = 2;
  }
  else {
    $('.gallery-window ul').animate({left: left1 -= picwidth}, 500);
    picnum++;
  }

  console.log("number" + picnum);
  console.log("position" + left1);
});

На основании двух журналов консоли, которые у меня есть в самом конце, проблема заключается в том, что свойство position не возвращается к 0, когда выполняется условие "если". Не поймите меня неправильно, jQuery следует порядку свойств CSS и перемещает мой список обратно в начало, но свойство position остается в минусе.

Вот скопированная информация моего журнала консоли, надеюсь, вы понимаете, о чем я: 

number2 position-320

number3 position-640

number4 position-960

number2 position-960

На данный момент из-за эффектов перехода 4 изображения, 3 обычных и 4-е, совпадают с первым. Но когда я нахожусь на 4-м и нажимаю «Далее», все выглядит хорошо, но мое свойство «position» остается на -960 . Поэтому, если после этого нажать кнопку «Далее», вместо того, чтобы снова перевести меня с 0 (где свойство css установило его) на -320, мгновенно поднимется до -1280 , что, разумеется, приводит к беспорядкам. до моей галереи.

Есть идеи, что может быть причиной, и как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Я обнаружил, что вы делаете ошибку в правильном утверждении. Когда picnum === length, вам нужно установить ul left в начальную позицию (скажем, 0). 

if (picnum === length) {
  $('.gallery-window ul').css("left", "0px").animate({left: 0}, 500);
  picnum = 2;
} else {
  $('.gallery-window ul').animate({left: left1 -= picwidth}, 500);
  picnum++;
}

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

0 голосов
/ 02 ноября 2018

Возможно, вы уже заметили, но вы не устанавливаете left1 в 0, так почему же это будет 0? В обеих ветвях if вы устанавливаете left1 - = picwidth, следовательно, вы видите console.logs.

Если бы я был вами, я бы изменил значение переменной внутри if, а затем сделал бы все, что вы хотите после этого: 

$('.gallery-next').click(function() {
    if (picnum === length) {
        left1 = 0;
        picnum = 2;
    }
    else {
        left1 -= picwidth;
        picnum++;
    }

    $('.gallery-window ul').animate({left: left1 }, 500);

    console.log("number" + picnum);
    console.log("position" + left1);
});
...