Слайд-шоу jQuery с переходами / продолжительностью для каждого слайда - PullRequest
Новая
       1

Слайд-шоу jQuery с переходами / продолжительностью для каждого слайда

3 голосов
/ 12 октября 2011

Я ищу слайд-шоу jQuery, которое поддерживает на слайд тайм-ауты и переходы.

Из моего исследования кажется, что Cycle Plugin является наиболее подходящим вариантом, поскольку он имеет значительный выбор переходов по умолчанию, и я даже узнал, как установить тайм-ауты для каждого слайда из этого Тема:

jQuery Slideshow со случайными тайм-аутами (а также их часто задаваемые вопросы по теме)

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

Может кто-нибудь посоветовать, как добиться того, что я ищу? Я готов переписать плагин, если потребуется, но, возможно, кто-то знает о более быстром / более простом способе.

Заранее спасибо!

ОБНОВЛЕНИЕ: Мне удалось удовлетворить мои требования, сгенерировав список разделенных запятыми переходов и передав их в качестве значения параметра fx: плагина .cycle. Для справки я использовал страницу часто задаваемых вопросов, связанную выше, для времени показа слайдов, а также на странице «» показано, как использовать несколько эффектов на одном слайд-шоу. »для переходов на слайд.

Ответы [ 2 ]

2 голосов
/ 29 октября 2011

Мне удалось удовлетворить мои требования, сгенерировав список разделенных запятыми переходов и передав их в качестве значения параметра fx: плагина .cycle. Для справки я использовал страницу часто задаваемых вопросов, связанную выше, для времени показа слайдов, а также на странице «» показано, как использовать несколько эффектов в одном слайд-шоу. »для переходов для каждого слайда.

0 голосов
/ 13 декабря 2013

Теперь с плагином Cycle2 намного проще .

Например (не тестировалось, но скопировано с сайта Cycle2 ): 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.tile.js"></script>

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next5"
    data-cycle-prev="#prev5"
    >
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false>
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12>
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4>
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false>
</div>

JavaScript не требуется!

...