jQuery Cycle：如何在運行的幻燈片上更改過渡效果

Question

我使用jQuery Cycle插件的before:選項來確定用戶是通過幻燈片顯示向左還是向右移動，並且想要動畫據此（scrollLeft，scrollRight）。

不幸的是，我找不到如何在運行時更改插件的選項（過渡效果）。

任何想法？

Answer 1

聽起來好像這是你想要的效果：http://jsfiddle.net/zvVcD/

如果是這樣的話，你只需要使用「scrollHorz」的效果，然後定義一個和下一個觸發器，像這樣：

$('#s2').cycle({ 
    fx: 'scrollHorz', 
    speed: 'fast', 
    timeout: 0, 
    next: '#next2', 
    prev: '#prev2' 
}); 

Answer 2

下面是更通用的方法：

var $cycler = $(".cycler"), 
    prev = function() { $cycler.cycle(prevIndex, "scrollRight"); }, 
    next = function() { $cycler.cycle(nextIndex, "scrollLeft"); }; 

    $cycler.cycle({ 
        fx:  'scrollLeft', 
        after: function(currSlideElement, nextSlideElement, options) { 
          slideIndex = options.currSlide; 
          nextIndex = slideIndex + 1; 
          prevIndex = slideIndex -1; 

          if (slideIndex == options.slideCount-1) { 
           nextIndex = 0; 
          } 

          if (slideIndex == 0) { 
           prevIndex = options.slideCount-1; 
          } 
         } 
       }); 

    $(".prev").bind("click", prev); 
    $(".next").bind("click", next); 

您可以更改scrollLeft和scrollRight到任何你喜歡的。請注意，我使用.prev，.next和.cycler類別分別用於我的上一個按鈕，下一個按鈕和循環器容器。