0

前のボタンと次のボタンをコンテンツスライダーに追加しようとしていますが、問題があるようです。本当にやりたいのは、前または次のボタンがクリックされるたびに、$slideCtnを幅slideWidthだけ左または右に移動することです。しかし、各クリックをslideWidthの値でインクリメントする方法がわかりません。++や-などを試しましたが、結果がありませんでしたが、このようなことを行うための最良の方法を誰かに教えてもらえますか？他のアドバイスも大歓迎です！

または、0に設定されるグローバルインデックス変数を作成し、ページネーションxがクリックされるか、前/次の矢印がクリックされると、このグローバル変数を更新する必要がありますか？

JSスニペット

//Add previous + next arrows
$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    $slideCtn.css('left', ( arrDir === 'prev' ) ? -(slideWidth) : +(slideWidth));

    e.preventDefault();
});

JSフィドル http://jsfiddle.net/SG5ad/10/

4

2 に答える 2

1

現時点では、-200px または +200px (決して 0px、400px、600px など) の絶対位置に移動するように指示しています。

現在の位置と、それをどれだけ調整したいかを考慮する必要があります: http://jsfiddle.net/SG5ad/12/

var arrDir = $(this).data('dir')
    iLeft = parseInt( $slideCtn.css('left') );

$slideCtn.css('left', ( arrDir === 'prev' ) ? iLeft - slideWidth : iLeft + slideWidth);

同様に修正したいバグは、「x」ナビゲーションで特定のスライドにジャンプするまで、次へ/前へのボタンが何もしないことです。

まったく別の問題として、約 6 か月前に、私は仕事中のプロジェクトの一環としてこのようなものを書きました (さらにいくつかの付加機能がありましたが、劇的な違いはありませんでした)。変更する価値がある重要な点が 1 つあります。 .

現時点でスライドからスライドに移動するにはa、スライド、、およびをアニメーション化します。つまり、 a) 1 つではなく 4 つのスライド (およびそのすべての子要素) がアニメーション化されます。b) スライドを 通過する必要があります。関係ないdabcd

bc

z-index を使用して、すべてのスライドの基本位置を変更して互いの上に積み重ねてから、上のスライドを片側にアニメーション化して、その下のスライドを表示するだけです。どのスライドがどこにあるかを追跡するためのコードが少し必要ですが ($.data()役立つ場合があります)、最後にはるかにパフォーマンスの高いスライダーが表示されます。

于 2012-10-11T22:21:22.723 に答える
0

.animate（）でやらなきゃ

$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    if (arrdir == left){
       $slideCtn.animate({
         left: "+=250"
       });
    }
});
于 2012-10-11T22:19:39.307 に答える