jquery的週期幻燈片 - 用自定義動畫

我使用與自定義動畫jquery的週期插件沿加入滑動上/下一個進展（一拉scrollHorz）。它工作得很好！jquery的週期幻燈片 - 用自定義動畫

然而，我想的幻燈片前進到右側或左側，這取決於索引＃，即，如果用戶點擊鏈接1，而滑動＃3是活動幻燈片的動畫將轉移出到右側，而如果在幻燈片上單擊鏈接4將轉換到左側。

我要找的功能是一樣的scrollHorz/scrollVert過渡。

我知道我需要的是將當前幀和下一幀關聯起來的邏輯：if（frameclicked是比當前幻燈片更高的索引）{動畫向左} else {動畫向右}

我只是不知道把它放在代碼中。我希望這是有道理的。任何幫助將不勝感激！謝謝！

不，它可能會有所幫助，但我的自定義代碼如下。

$('#s4').before('<div id="nav" class="nav">').cycle({ 
    fx:  'custom', 

    cssBefore:{ 
      left:1000, 
      opacity:0, 
      display:'block' 
     }, 
    animIn:{ 
      left:0, 
      opacity:100 
     }, 
    animOut:{ 
      left:-1000, 
      opacity:0 
     }, 
    cssAfter:{ 
      display:'none' 
     }, 
    speed: 'slow', 
    easeIn: 'easeInExpo', 
    easeOut: 'easeInExpo', 
    next: '.nextnav', 
    prev: '.previous', 
    timeout: 0, 
    containerResize: 1, 
    fit: 0, 
    height: 600, 
    pager: '#slideshow-nav', 
    pagerAnchorBuilder: function(idx, slide) { 
      return '#slideshow-nav li:eq(' + (idx) + ')'; 
     } 

});

來源

2011-04-17 Jackrabbitrocks

你需要掛接到到onPrevNextEvent。他們有一些東西叫isnext至於通過這基本上告訴你你要進入哪個方向。

例子我更新了一個小提琴，我昨天鞭打了週期。

http://jsfiddle.net/gx3YE/12/

$(function() { 

$('#megaWrapper').cycle({ 
    next : "#next", 
    prev : "#prev", 
    timeout : 0, 
    onPrevNextEvent: function(is,i,el) { 
     if (is === true) { 
      alert('slide right'); 
     } 
     else { 
      alert('slide left'); 
     } 
    } 

});

}）;

來源

2011-04-18 04:31:30 wesbos

非常感謝你的幫助！我真的很感激你花時間看這個。這無疑是朝着正確方向邁出的一步。我仍然需要了解如何從條件語句中訪問動畫功能 - 或者使用條件語言中的信息。那麼，我是否會用上述示例中的alert函數替換動畫？或者我可以傳遞一個變量給aniIn/aniOut？恐怕我還不清楚它的外觀。 – Jackrabbitrocks 2011-04-19 18:44:18

另外，onPrevNextEvent可以用於自動生成的傳呼機鏈接還是僅用於p/n按鈕？我真的希望在這個插件上有一些文檔。考慮到這個問題已經持續了很長時間，我感到很驚訝。 – Jackrabbitrocks 2011-04-19 18:49:46

是不是你所描述的循環的核心功能部分是什麼？

這裏是我如何做到這一點：

$('.slideshow').cycle({ 
    fx: 'scrollHorz', 
    timeout: 0, 
    next: '#next', 
    prev: '#prev'  
});

來源

2011-06-15 17:07:20 Doron

嗯，我看到她的努力做，我有同樣的問題... 我使用scrollHorz沒有問題......我所有的時間..我工作的項目需要當前幻燈片滑到屏幕（左或右），但也有淡出的是退出幻燈片效果... 的「onPrevNextEvent」似乎近乎完美..的animOut，animIn的偉大工程太..但我不能設置一個向左或向右outro其中任何一個..只是一個方向.... :( 任何想法的人？ – Abbey 2013-07-23 01:12:33

jquery的週期幻燈片 - 用自定義動畫

回答

相關問題