澳门银河网上官方赌场_老品牌值得信赖

ITKeyword,专注技术干货聚合推荐

注册 | 登录

解决javascript - jquery cycle slideshow - adding slide prev/next progression (a la scrollHorz) along with custom animation

itPublisher 分享于

2020腾讯云限时秒杀,爆款1核2G云服务器99元/年!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1062

2020阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址https://www.aliyun.com/minisite/goods

I am using the jquery cycle plugin with a custom animation. It is working great!

However, I would like the slides to advance to the right or left depending upon the index#, i.e. if the user clicks on link 1 while slide #3 is the active slide the animation will transition out to the right, while if link 4 was clicked on the slide would transition to the left.

The functionality I'm looking for is the same as the scrollHorz/scrollVert transitions.

I understand that what I need is some logic to relate the current frame and the next frame: if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}

I just don't know where to put it in the code. I hope that makes sense. Any help would be greatly appreciated! Thanks!

Not that it probably helps, but my custom code is below.

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'custom',

    cssBefore:{
            left:1000,
            opacity:0,
            display:'block'
        },
    animIn:{
            left:0,
            opacity:100
        },
    animOut:{
            left:-1000,
            opacity:0
        },
    cssAfter:{
            display:'none'
        },
    speed:  'slow',
    easeIn: 'easeInExpo',
    easeOut: 'easeInExpo',
    next: '.nextnav',
    prev: '.previous',
    timeout: 0,
    containerResize: 1,
    fit: 0,
    height: 600,
    pager: '#slideshow-nav',
    pagerAnchorBuilder: function(idx, slide) {
            return '#slideshow-nav li:eq(' + (idx) + ')';
        }

});
javascript jquery jquery-plugins cycle jquery-cycle
|
  this question
edited Sep 26 '12 at 2:33 Eli 13.2k 5 45 73 asked Apr 17 '11 at 20:13 Jackrabbitrocks 28 1 7

 | 

2 Answers
2

解决方法

You need to hook into to onPrevNextEvent. They have something called isnext wich gets passed wich basically tells you which direction you are going in.

Example I updated a fiddle I whipped up yesterday for cycle.

http://jsfiddle.net/gx3YE/12/

$(function() {

$('#megaWrapper').cycle({
    next : "#next",
    prev : "#prev",
    timeout : 0,
    onPrevNextEvent: function(is,i,el) {
        if (is === true) {
            alert('slide right');
        }
        else {
            alert('slide left'); 
        }
    }

}); 

});


|
  this answer
answered Apr 18 '11 at 4:31 wesbos 11.3k 21 76 122      Thank you so much for your help! I really appreciate you taking the time to look at this. It is certainly a step in the right direction. I'm still in need of understanding how to access the animating function from within the conditional statement - or to use information from the conditional. So, would I replace the alert in your example above with the function to animate? Or could I pass a variable to aniIn/aniOut? I'm afraid I'm still unclear about how that would look. –  Jackrabbitrocks Apr 19 '11 at 18:44      Also, would the onPrevNextEvent work for the auto-generated pager links or just for the p/n buttons? I really wish there was some kind of documentation on this plugin. I'm sorta surprised considering it has been out for so long. –  Jackrabbitrocks Apr 19 '11 at 18:49

 | 

Isn't what you're describing part of Cycle's core functionality?

Here's how I do it:

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
}); 

|
  this answer
answered Jun 15 '11 at 17:07 Doron 21 1      hmm, I see what she's trying to do and I have the same question... I have no problem using scrollHorz... i do all the time.. the project I'm working on needs the current slide to slide off the screen (right or left) but also with a fade out effect on the that exiting slide... the "onPrevNextEvent" seems almost perfect.. the animOut, animIn works great too.. but I cannot set a right or left outro to any of them.. just one direction.... :( any ideas anyone? –  Abbey Jul 23 '13 at 1:12

 | 


相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。

澳门银河网上官方赌场