Скольжение 3-х разделов одновременно в горизонтальном слайд-шоу

Я создаю слайд-шоу, которое показывает 3 горизонтальных элемента div и 3 ссылки внизу. Ссылки должны перемещаться по 3 элемента за раз и заменять его следующими 3 элементами (ровно по 3 на каждый клик). Вот что я сделал до сих пор: http://tipoos.com/buzz

Мне было интересно, нужно ли мне делать это в списке UL или просто с использованием плавающих элементов div. наконец решил использовать div.

Кто-нибудь знает, как я могу это сделать? Я также хотел бы, чтобы 3 div автоматически перемещались каждые 5 секунд или около того.

будем признательны за любую помощь. Спасибо, Гил.


jquery slideshow slide jquery-animate
person gil hamer    schedule 03.05.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если плагин подходит, то я ранее использовал: http://gmarwaha.com/jquery/jcarousellite/ который делает то, что вы хотите

person Andrew Hall    schedule 03.05.2012

arrow_upward
0
arrow_downward

Проверьте следующую модификацию вашей страницы:

http://jsfiddle.net/snies/B4FB5/35/

Основная идея заключается в том, что вам нужно 6 изображений, чтобы иметь возможность прокручивать 3 внутрь и 3 наружу. Они живут в 1 содержащем "ползунке" div, который перемещается. Он должен быть достаточно широким для 6 изображений. Вся настройка содержится в div «slider_window», достаточном для трех изображений. У этого свойства css «переполнение» установлено на «скрыто».

Представьте себе картонное окно и листок бумаги с картинками, теперь вы перемещаете лист бумаги вдоль окна.

Для простоты использования и анимации я использую jQuery ( http://api.jquery.com/animate/ ).

Как только анимация закончится, вы поменяете изображения и вернете весь div на место. Если вы предварительно загрузите изображения, это переключение происходит достаточно быстро, чтобы пользователь не мог его увидеть. В качестве альтернативы вы можете удалить изображения с одной стороны и добавить новые с другой стороны. В демонстрации я просто возвращаю его на место через 5 секунд.

person snies    schedule 03.05.2012
comment
Потрясающий! также возможно плавно вернуться назад, потому что сейчас он очень быстро возвращается в исходное положение и выглядит не очень хорошо. может быть, плавно скользить назад, как обычно. также как мне активировать 3 кнопки внизу, чтобы также вызвать ползунок? Большое спасибо! Гил - person gil hamer; 03.05.2012
comment
конечно, он может скользить назад медленно, просто используйте функцию animate() вместо функции css(), чтобы вернуть его обратно. - person snies; 04.05.2012
comment
чтобы активировать кнопки, просто подключите понравившуюся кнопку к коду анимации в демоверсии. я бы предложил использовать метод jQuery .click() api.jquery.com/click. $(#button_id).click( function_to_be_call ) -- Кстати, если вам нравится ответ, было бы неплохо, если бы вы могли его принять - person snies; 04.05.2012