第一次循环后,jQuery Cycle Plugin在第一张幻灯片上停止

时间:2013-01-15 19:44:36

标签: javascript jquery loops slider cycle

我正试图通过一次+ 1播放我的幻灯片。为了实现这一点,我设置了播放幻灯片一次的选项,然后在结束后,恢复到第一张幻灯片,然后停止。

我觉得我的代码应该可行,而且大多数都可以。幻灯片播放将播放所有幻灯片,然后再次继续为第一张幻灯片设置动画,但需要注意一点:幻灯片寻呼机“活动”项目不会随幻灯片放映一起更新。出于某种原因,最后一项是保持活动的项目。

这是我正在使用的代码:

$('.slides_container').after('<div id="slides-nav" class="pagination">').cycle({
    fx: 'scrollLeft',
    // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pause: true,
    pager: '#slides-nav',
    speed: 500,
    timeout: 500,
    autostop: true,
    end: function(options) {  
        $('.slides_container').cycle('resume').cycle('0').cycle('stop');  
    }
});

我将速度和超时设置为500只是为了便于测试。

编辑 - 很棒。我已经创建了一个jsfiddle来演示。但它甚至与我实际项目中的工作方式不同。幻灯片结束后,This example似乎根本不会循环播放。那么多......

我的问题仍然存在。随意使用jsfiddle来帮助我。

1 个答案:

答案 0 :(得分:0)

问题解决了!在我的情况下,我必须计算直接的孩子div元素,因为我使用的是背景图像。但为了演示,在this jsfiddle我们正在寻找img元素。

正如您所看到的那样,我们只计算了直接孩子的数量,并在计数中加1,然后将其定义为autostopCount选项。

autostopCount: $('#banner > img').length+1