2010-11-20 85 views
2

我有一个滑块,看起来像这样:jQuery的周期:最后一张幻灯片后,回滚到第一张幻灯片

$('#slider').cycle({ 
    fx: 'scrollHorz', 
    speed: 1250, 
    timeout: 5000, 
    easing: 'easeInOutExpo', 
    pager: '#slider-pagination', 
    next: '#next-slide', 
    prev: '#prev-slide', 
    pause: 1 
}); 

默认情况下,它是在最后一张幻灯片循环只滚动到再次向左展开就好像它是一个无限循环一样。我希望它能够翻回所有的幻灯片,并再次登陆第一张幻灯片。就像它在这里一样(参见上一张幻灯片):http://www.iconlicious.com/。我必须使用Cycle,所以我不能使用相同的插件。

这怎么能实现?

感谢

+1

使用结束:选项,知道什么时候该幻灯片已经达到结束并触发你的代码滑回 – Ben 2010-11-22 12:34:38

回答

0

看你的网站,我可以告诉你已经解决了你的问题,但我想张贴此情况下还有其他人谁可能会发现它的价值。

您使用jquery.scrollable,这是一个很好的解决方案,为我解决了同样的问题。

+0

链接已经死了... – Stephan 2012-12-01 22:18:17

2

解决的办法是将nowrap选项设置为false。

虽然我无法测试任何东西,但您可能必须使用end选项来定义函数以返回到开头。

所以,像这样:

$('#slider').cycle({ 
    fx: 'scrollHorz', 
    speed: 1250, 
    timeout: 5000, 
    easing: 'easeInOutExpo', 
    pager: '#slider-pagination', 
    next: '#next-slide', 
    prev: '#prev-slide', 
    pause: 1 
    nowrap: false, 
    end: function() { 
     // make it go to the first slide 
    } 
}); 
+0

这个解决方案适用于我。我的'end'函数由第一张幻灯片的调用循环组成:'$('#slider')。cycle(0);' – opes 2013-03-29 21:30:07

1

使用未记录的 '反弹' 选项:

$('#slider').cycle({ 
    fx: 'scrollHorz', 
    speed: 1250, 
    timeout: 5000, 
    easing: 'easeInOutExpo', 
    pager: '#slider-pagination', 
    next: '#next-slide', 
    prev: '#prev-slide', 
    pause: 1, 
    bounce: true 
}); 

希望这有助于

相关问题