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类作为上一个按钮，下一个按钮和循环器容器。

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

2 个答案: