JQuery Cycle Plugin - Задержка интервала между слайдами Вопрос - PullRequest
Новая
       22

JQuery Cycle Plugin - Задержка интервала между слайдами Вопрос

1 голос
/ 20 мая 2011

Я использую jQuery Cycle Plugin для слайдера изображений.Я ищу что-то вроде этого:

image1.jpg >> fadeout >> удерживайте пустую рамку в течение секунды >> fadein image2.jpg >> repeat

Как можноЯ контролирую задержку перед началом следующей анимации затухания или интервал между 2 переходами между слайдами?

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

** Мне нужно, чтобы это работало, когда я меняю слайды с помощью пейджера или ссылок next / prev.

Я пытался включить синхронизацию:0, чтобы остановить одновременный переход затухания между 2 слайдами, но не совсем то, что я искал.

Любой совет будет оценен, спасибо.

Ответы [ 2 ]

3 голосов
/ 23 мая 2011

Вы можете определить пользовательский переход, который затухает текущий слайд, ждет, а затем исчезает на следующем слайде.

Более полный пример, чем приведенный ниже, см .: http://jsfiddle.net/QGRv9/1/

$.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
    opts.fxFn = function(curr, next, opts, after) {
        $(curr).fadeOut(opts.fadeSpeed, function() {
            $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                after();              
            });
        });
    };
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fadeOutWaitFadeIn',
        fadeSpeed: 500,
        delayBetweenFades: 2000,
        //The timeout value includes the fade speed (twice) and delay between fades.
        //e.g. For a 3000 ms timeout, use 3000 + 500 * 2 + 2000 = 6000.
        timeout: 6000
    });
});

Обратите внимание, что я, вероятно, делаю что-то не так здесь. Тайм-аут не должен включать другие значения. Есть также одна небольшая проблема: первый слайд будет показан за 6000 мс вместо 3000 мс.

0 голосов
/ 21 мая 2011

Один из способов - вставить пустой слайд после каждого изображения.Затем можно использовать параметр timeoutFn, чтобы задать другое значение времени ожидания в зависимости от того, является ли слайд изображением или пустым слайдом.

В следующем примере изображения отображаются в течение 5 секунд, а пустые слайды отображаются в течение 2 секунд.секунд:

http://jsfiddle.net/7jJe3/

<div id="slideshow">
    <img src="image1.jpg" />
    <span></span>
    <img src="image2.jpg" />
    <span></span>
    <img src="image3.jpg" />
    <span></span>
</div>

function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
    var imgtime = 5000;
    var blanktime = 2000;
    if ($(currSlideElement).is('img'))
        return imgtime;
    return blanktime;
};

$(function() {
    $('#slideshow').cycle({
        fx: 'fade',
        speed: 400,
        timeoutFn: timeoutfn
    });
});
...