2010-11-20 84 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 
}); 

希望這有助於

相關問題