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

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

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



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



Желательно решение без плагинов.
  • Вопрос задан
  • 11895 просмотров
Решения вопроса 1
kartoshin
@kartoshin
Я делал подобное для бесшовных картинок, спокойно можете изменить под свои нужды.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@magmoro
переставлять элементы или клонировать, очевидно же
Ответ написан
@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) ....


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

ЗЫ: С клонирование были какие то сложности, поэтому остановился на такой реализации.
Ответ написан
Комментировать
L0NGMAN
@L0NGMAN
Могу посоветовать plugins.jquery.com/project/jCarouselLite весит всего 2кб и есть различные настройки. Demo: gmarwaha.com/jquery/jcarousellite/index.php#demo
Ответ написан
Комментировать
@niko83
вот тут пример, кажется это то что вам нужно. Кода не много и можно разобраться что да как реализовано
jqueryfordesigners.com/demo/infinite-carousel.html
Ответ написан
Комментировать
@Darth_jktu
Если на jQuery , не загружается ваш пример , то попробуйте .appendTo() в одну сторону и .prependTo() в другую, просто переносить. периодически удаляя накапливаемое(если таковое будет)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы