使用jQuery同步多個滑塊循環

我在項目中使用jQuery Cycle。你可以看到我的腳本at pastebin。使用jQuery同步多個滑塊循環

基本上，有三個不同的滑塊綁定到相同的方向控制。我希望他們的轉換是同步的。現在，由於這裏有三個單獨的滑塊實例，它們開始同步，但如果您離開瀏覽器窗口或其他東西，它們有時會立即失去同步效果—。這導致序列失序並且通常看起來不合適。我希望所有的滑塊在同一時間發射，最好鏈接到.sliderImages幻燈片。

我試圖創建一個包含其它兩個滑塊功能，並把在上.sliderImages滑塊before選項，但是這使得它全力以赴靠不住的，我不知道足夠JS能夠解決。

像往常一樣，任何幫助表示讚賞。

謝謝！

來源

2012-04-12 bigsweater

將它們全部設置爲'timeout：0'並添加'setInterval（「$（'。slides'）.cycle（'next'）」，3000）;'似乎同步動畫，但它會干擾先前/下一張幻燈片導航。 – bigsweater 2012-04-12 03:26:48

[我幾乎明白了]（http://pastebin.com/djtYwA0r）。幻燈片同步正確，並且節目停留在懸停狀態;但是，當鼠標離開'.hero'區域時，有些事情是錯誤的。而不是簡單地恢復幻燈片，它似乎將每個幻燈片上的速度加倍，或沿着這些線條。我敢肯定，我只是誤解了JavaScript的SetInterval功能;任何幫助讚賞。 [我試過]（http://forum.jquery.com/topic/jquery-cycle-plugin-synchronized-slideshows-with-pause-on-hover），但無法讓它工作。 – bigsweater 2012-04-12 10:22:40

因此，我的頭撞牆後一會兒，我偶然發現Ryan Florence's jQuery Slideshow。它比Cycle或其他幾乎所有幻燈片插件（儘管它需要jQuery UI）都要輕很多（很多很多），它有很好的文檔記錄，並且相對比較容易插入並且可以按照你的想法工作。

有一個thread on his slideshow Github page他幫我讓代碼正常工作，還有一個link to the final code。

當然，如果有人有改善我的代碼的建議，我向他們開放。但是這個插件就像它們來的時候那樣簡單而多功能。

也許更多有才華的程序員，我可以使它適合移動設備，像Flexslider ......

來源

2012-04-13 22:04:01 bigsweater

如果使用（窗口）.load功能加載了jQuery的週期，並使用兩種不同的選擇與同選項，那麼你應該完全同步兩個滑塊。

我假設如果你把它們作爲兩個獨立的inits加載它們，並且如果你準備好加載它們，時間將會被關閉。

無論如何，它適用於我。

來源

2012-08-15 18:41:59

自從我創建這個版本以來已經有一段時間了，但是據我所知，我嘗試在同一個init上使用兩個不同的選擇器，並且它們最終會失去同步。此外，我試圖對每個滑塊使用不同的轉換，這使得使用單個init對我來說更加困難（儘管我不是JS專家，所以可能有一個簡單的解決方案）。 – bigsweater 2012-10-25 22:32:13

還應該注意的是，FlexSlider的最新版本現在提供了類似的播放/暫停掛鉤，因此您可以使用setTimeout同步兩個（或更多）具有不同轉場的滑塊。當我建立這個網站時，FlexSlider在這方面相當有限。（儘管你仍然無法創建自己的轉換......） – bigsweater 2012-10-25 22:34:17

使用jQuery同步多個滑塊循環

回答

相關問題