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

【问题标题】：jQuery Cycle: How to change transition effect on a running slideshowjQuery Cycle：如何更改正在运行的幻灯片的过渡效果
【发布时间】：2011-04-10 19:55:49
【问题描述】：

我正在使用 jQuery Cycle 插件的before: 选项来确定用户是通过幻灯片向左还是向右移动，并且我想相应地制作动画（scrollLeft、scrollRight）。

很遗憾，我找不到如何在插件运行时更改插件的选项（过渡效果）。

有什么想法吗？

【问题讨论】：

标签： jquery cycle transition effect

【解决方案1】：

这是更通用的方法：

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 类。

【讨论】：

嗨，我还没有尝试过，但它看起来确实很有趣。谢谢！

【解决方案2】：

听起来这就是你想要的效果：http://jsfiddle.net/zvVcD/

如果是这样，你只需要使用“scrollHorz”效果，然后定义上一个和下一个触发器，如下所示：

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

【讨论】：

非常感谢。这确实解决了这个特定问题。但是你对更通用的方法有什么想法吗？对于任何其他效果？例如：在下一个上淡入淡出，在上一个上滑动。
很遗憾，我认为 Cycle 插件不支持您正在寻找的内容。