Question

//S1
$('#s1').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 1000,

});

//S2
$('#s2').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 2000
});


//S3
$('#s3').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 3000
});

JSFiddle

我有三个滑块。我想逐个滑动它们。在第一次幻灯片滚动后，它应该暂停直到第三个滑块滚动。有关如何做到这一点的任何帮助？

Answer 1

使用延迟属性。

$('#s1').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay : -5000

});

//S2
$('#s2').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay : -3000
});


//S3
$('#s3').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay:-2000
});

<强> Working Fiddle

Answer 2

查看以下源代码。它正在使用jquery.cycle的内部事件来暂停/恢复其他滑块。我认为它比使用简单延迟更强大（这似乎会在一段时间后引起一些干扰）。

//S1
var s1 = $('#s1').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s1').cycle('pause'); // when slider1 finishes one slide, pause it
        $('#s2').cycle('resume'); // resume next slider, in this case, slider2
    }
});

//S2
var s2 = $('#s2').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s2').cycle('pause'); // when slider2 finishes one slide, pause it
        $('#s3').cycle('resume'); // resume next slider, in this case, slider3
    }
});
s2.cycle('pause'); // by default pause slider2

//S3
var s3 = $('#s3').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s3').cycle('pause'); // when slider3 finishes one slide, pause it
        $('#s1').cycle('resume'); // resume next slider, in this case, slider1
    }
});
s3.cycle('pause'); // by default pause slider3

我还捆绑了fiddle。

Answer 3

对@ NicolaeOlariu的小修改

function applyAnimeScroll(a, b, c) {
    return {
        fx: 'scrollDown',
        speed: 500,
        timeout: 1000,
        after: function () {
            $('#s1').cycle(a);
            $('#s2').cycle(b);
            $('#s3').cycle(c);
        }
    };
}

var s1 = $('#s1').cycle(applyAnimeScroll('pause', 'resume', 'pause'));
var s2 = $('#s2').cycle(applyAnimeScroll('pause', 'pause', 'resume'));
var s3 = $('#s3').cycle(applyAnimeScroll('resume', 'pause', 'pause'));

Working Fiddle

如何暂停滑动图像并在一段时间后再次滑动

3 个答案: