jQuery Горизонтальная прокрутка с неизвестной шириной элементов - PullRequest
Новая
       15

jQuery Горизонтальная прокрутка с неизвестной шириной элементов

0 голосов
/ 20 мая 2010

Я создаю галерею, используя jQuery, которая отображает изображения по горизонтали, с кнопками «влево» и «вправо» внизу, которая прокручивает ряд изображений. Для этого есть множество учебных пособий и плагинов.

Проблема для меня заключается в том, что 1) я не знаю ширину изображений. И 2) Мне нужен элемент, к которому я прокручиваю, чтобы быть в центре.

Как мне это сделать?

Большое спасибо, Горм

Хорошо, я попытаюсь уточнить.

Скажем, у меня есть горизонтальный ряд изображений (с фиксированной высотой, но неизвестной ширины - хотя и меньше, чем окружающий контейнер), с кнопками «Вперед» и «Предыдущая», как 

<div class="imgContainer">
  <ul>
    <li><img src="01.jpg" alt=""></li>
    <li><img src="02.jpg" alt=""></li>
    <li><img src="03.jpg" alt=""></li>
    <li><img src="04.jpg" alt=""></li>
    ...
  </ul>
</div>
<a href="#" id="prev">Previous image</a>
<a href="#" id="next">Next image</a>

Когда страница загружается, первое изображение отображается в центре, а следующие изображения выходят вправо.

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

Я пробовал разные "решения", но я слишком новичок в js / jquery для этого, я думаю. Так что любая помощь будет принята с благодарностью. : -)

1 Ответ

0 голосов
/ 20 мая 2010

Ну

  1. Рассчитайте ширину изображений
  2. Центр предмета, который вы прокручиваете

Если серьезно, вам нужно предоставить немного больше информации, чтобы получить осмысленные ответы.

Вы можете рассчитать ширину изображений внутри коллекции следующим образом: 

var totalWidth = 0;
$('.container img').each(function() {
    totalWidth += $(this).outerWidth();
});

В противном случае это просто арифметика. Расскажите подробнее о проблемах, с которыми вы столкнулись, если это не поможет.

...