1

我正在将 jQuery Cycle 插件用于滑块 - 在滑块移动到下一张幻灯片之前单击下一个链接时，我需要完成一个功能。

目前我无论如何都看不到在“之前”功能完成之前阻止下一个动作触发。我正在使用下面的代码。

$('#marques-slider').cycle({
fx: 'scrollHorz',
transition: 'scrollHorz',
timeout:  0,
prev:    '#prev-slide',
    next:    '#next-slide',
    pager:   '#nav', 
    easing: 'easeInOutExpo',
    speed:  1000,
    before:  slideUp, 
    after:   slideDown,
    startingSlide: 1
});

目前我的 onBefore 函数和 next slide 函数都在同时动画。

我还尝试在插件之外创建下一个链接：

            $('#next-slide').click(function(){
                $('.marques-product-content').animate({
                    height : '0'
                }, function(){
                    $('#marques-slider').cycle('next');
                });
                return false;
            });

但这会导致幻灯片背景图像在动画之前发生变化，并且该功能仅在第一次单击时起作用：/

4

2 回答 2

1

“下一个”功能似乎无法通过插件方法等待您的“之前”完成。

但是，深入研究 cycle.js 代码，您可以延迟这些行中的下一个函数：

var fn = function() {$n.delay(800).animate(opts.animIn, speedIn, easeIn, cb)};
$l.delay(800).animate(opts.animOut, speedOut, easeOut, function() {
    if (opts.cssAfter) $l.css(opts.cssAfter);
    if (!opts.sync) fn();
});

大约第 860 行 - （不准确，因为我通过代码添加了一些注释/评论/自定义）。在这里，我添加了 .delay(800) ，它给出了预期的效果。

于 2011-03-11T12:27:03.997 回答
0

你不能只调用一个等待的单独函数吗？

$('#slideshow').cycle({
before: onBefore,
after: onAfter
});

function onBefore(curr, next, opts){
   //Before changing slides do this
};

function onAfter(curr, next, opts){

//here, set your delay or a loop that continues until the slide is not animating,
//at which time it will proceed to fire the script you want

//The code below loops doing nothing if the element's animation is not complete.
//or else once the animation is complete it does something and stops the loop.
//This way jquery cycle's "after" event will call the onAfter function and get the variables, 
//for instance the current slide element (curr) or the current slide index (opts.currSlide) 
//from the after event and hold it until the animation is complete and the slide has changed.

  for(i=0; i>0 i++){
    if( $(elem).is(':animated') ) {
       //do nothing
    }
    else { 
       //do something now that animation is complete 
       break;
    }
  }
};

以上代码未经测试。

我得到了我上面提到的变量，

当前幻灯片元素“curr”和当前幻灯片的索引“opts.currSlide”

从 jquery 循环选项参考- http://jquery.malsup.com/cycle/options.html并使用“console.log(opts)”通过我的 Google Chrome 控制台查看 opts 的内容。

希望这可以帮助。

于 2011-04-05T20:26:49.303 回答