2

カスタムアニメーションでjqueryサイクルプラグインを使用しています。うまくいっています！

ただし、インデックス番号に応じてスライドを右または左に進めたいと思います。つまり、スライド＃3がアクティブなスライドであるときにユーザーがリンク1をクリックすると、アニメーションは右に移行しますが、リンク4がスライドをクリックすると、左に移動します。

私が探している機能は、scrollHorz/scrollVertトランジションと同じです。

必要なのは、現在のフレームと次のフレームを関連付けるロジックであることを理解しています。if（frameclicked onは現在のスライドよりも高いインデックスです）{左にアニメーション化}else{右にアニメーション化}

コードのどこに配置すればよいかわかりません。それが理にかなっていることを願っています。どんな助けでも大歓迎です！ありがとう！

おそらく役立つというわけではありませんが、私のカスタムコードは以下のとおりです。

$('#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) + ')';
        }

});
4

2 に答える 2

4

にフックする必要がありますonPrevNextEvent。彼らはisnext、基本的にあなたがどちらの方向に向かっているのかを教えてくれる、通過するというものを持っています。

例昨日、サイクルのためにホイップしたフィドルを更新しました。

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'); 
        }
    }

});

}）;

于 2011-04-18T04:31:30.607 に答える
2

あなたが説明しているのは、Cycleのコア機能の一部ではありませんか？

これが私がそれをする方法です：

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
});
于 2011-06-15T17:07:20.510 に答える