Как автоматически анимировать блок div внутри контейнера?

Question

Я создаю отображение цитаты / отзыва для веб-сайта и хочу, чтобы несколько фрагментов отображались внутри одного контейнера.Следующее изображение должно помочь прояснить следующий текст ....

У меня есть контейнер, встроенный в боковую панель, и внутри этого контейнера я создал еще один субконтейнер ссерия div для отображения: inline.То, что я хотел бы сделать, это отобразить div 01, а затем, через определенное время, сдвинуть субконтейнер влево и отобразить div 02 - и т. Д.

Затем, когда он достигнетв конце, скажем, div 10, я бы хотел, чтобы он продолжал скользить влево и снова отображать div 01, а не скользить вправо - до конца через все div для достижения div 01CSS3-анимация или JS-решения хороши - в зависимости от того, что лучше всего.

Answer 1

Это можно сделать в javascript с помощью круглой карусели. jCarousel будет делать то, что вам нужно, если вы можете использовать jQuery, сочетая возможности автоматической прокрутки и циклические.

$('#mycarousel').jcarousel({
    auto: 2, // auto-scroll every two seconds
    wrap: 'circular'
});

jCarousel использует UL вместо div, но я уверен, что есть другие плагины / библиотеки, которые могут позволить вам быть более гибкими с вашей структурой.

Answer 2

Если вы оберните элементы в элемент div таким образом и повторите первый элемент последним:

--------------------------
|======= ======= ======= |
||div 1| |div 2| |div 1| |
|======= ======= ======= |
--------------------------

Вы можете установить таймер для перемещения левого края элемента оболочки <inner div width> каждые <x>секунд.Затем, когда вы достигли последнего (который является копией первого), ПОСЛЕ прокрутки к нему, вы просто перемещаете всю оболочку обратно в нулевое левое значение, и никто не становится мудрее - потому что это выглядит для них одинаково.

РЕДАКТИРОВАТЬ: я не имею в виду оживить его обратно в квадрат, я имею в виду просто установить левое в ноль.Визуальных изменений не будет, но вы сможете без проблем продолжить смещение влево.