Бесконечный jQuery.animate и "карусель"?

Question

[Kir Shatrov]

Сделал вот так: iempire.ru/example.html

(прокручивается вправо на 600px, потом в обратную сторону на 600 и так до бесконечности рекурсивной ф-цией)



Как сделать, чтобы все блоки крутились в одну сторону бесконечно, т.е. при выходе с одного края экрана появлялись с другого?



Желательно решение без плагинов.

Answer 1

[kartoshin]

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

Comments

[Kir Shatrov]

Спасибо! Остановлюсь на вашем решении)

Answer 2

[magmoro]

переставлять элементы или клонировать, очевидно же

Comments

[Kir Shatrov]

Как узнать, что элемент уже за границами окна?

[magmoro]

вычислить используя $element.offset() $window.width() и тп

[Kir Shatrov]

Спасибо, а бесконечный jQuery.animate прокрутки как?

[magmoro]

Если нужно бесконечное равномерное движение, то animate для этого не предназначен, обычный таймер срабатывающий каждые 50мс например можно использовать и смещать с учетом прошедшего времени (now — startTime).

Answer 3

[LastDragon]

Предположим, что
1) Дано 5 блоков
2) Область видимости ограничена и содержит известное количество элементов

[ 1 | 2 | 3 | 4 | 5 ]

[] — область видимости

Во время инициальзации нужно клонировать крайние блоки чтобы при прокрутке не возникало пустот:

2 | 3 | 4 | 5 [ 1 | 2 | 3 | 4 | 5 ] 1 | 2 | 3 | 4

Прокручиваем блок, как только доходим ко конца оригинального списка сбрасываем положение на нужны блок. Для примера:

1) 2 | 3 | 4 | 5 [ 1 | 2 | 3 |  4 | 5 ] 1 | 2 | 3 | 4
2) 2 | 3 | 4 | 5 | 1 [ 2 | 3 |  4 | 5 | 1 ] 2 | 3 | 4
3) 2 | 3 | 4 | 5 | 1 | 2 [ 3 |  4 | 5 | 1 | 2 ] 3 | 4
4) 2 | 3 | 4 | 5 | 1 | 2 | 3 [  4 | 5 | 1 | 2 | 3 ] 4
5) 2 | 3 | 4 | 5 | 1 | 2 | 3 |  4 [ 5 | 1 | 2 | 3 | 4 ]
6) Сброс
7) 2 | 3 | 4 | 5 [ 1 | 2 | 3 |  4 | 5 ] 1 | 2 | 3 | 4
8) ....

Из сложностей/ограничений:
* Все блоки должны располагаться в одном ряду
* Максимальное кол-во блоков может быть ограничено (зависит от браузера, если нужно могу подробнее посмотреть в чем была проблема)
* При изменении размеров области видимости возможны различные некрасивые артефакты, чтобы избежать их — можно динамически менять размер блоков

ЗЫ: С клонирование были какие то сложности, поэтому остановился на такой реализации.

Answer 4

[L0NGMAN]

Могу посоветовать plugins.jquery.com/project/jCarouselLite весит всего 2кб и есть различные настройки. Demo: gmarwaha.com/jquery/jcarousellite/index.php#demo

Answer 5

[niko83]

вот тут пример, кажется это то что вам нужно. Кода не много и можно разобраться что да как реализовано
jqueryfordesigners.com/demo/infinite-carousel.html

Answer 6

[Darth_jktu]

Если на jQuery , не загружается ваш пример , то попробуйте .appendTo() в одну сторону и .prependTo() в другую, просто переносить. периодически удаляя накапливаемое(если таковое будет)