jquery - jQuery Cycle：如何更改正在运行的幻灯片的过渡效果

Question

我正在使用before:jQuery Cycle 插件的选项来确定用户是通过幻灯片向左还是向右移动，并且我想相应地制作动画（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类。