0

私は特定のカルーセルを実行していますが、次のようになっています。

  • コンテンツ
  • 次へボタン
  • 前へボタン

そして、機能は次のとおりです。

  • [次へ]または[前へ]にカーソルを合わせると、コンテンツがボタンの方向に20ピクセル移動します。
  • ボタンをクリックすると、カルーセルがアニメーションを開始します。

現時点でのコードは失礼で、ifアニメーションやキューなどを防ぐためのコントロールが満載ですが、現時点では正常に機能しているようです。

私はjCarouselをプラグインとして使用しており、jQueryのイージングを使用しています。

私はあなたのためにJsFiddleを用意しました。

バグ：

バグが1つあります。次のボタンにカーソルを合わせると（マウスポインタを次のボタンにカーソルを合わせたままにします）、1回クリックし、ボタンから出ることなく常にカーソルを合わせたまま、もう一度クリックします。画像の位置がずれています。

これは、アニメーションの後、ホバー状態にあることを認識しなくなったために発生します。

どうすれば修正できますか？

4

2 に答える 2

1

だから私はあなたのフィドルを編集しました、そしてこれがあなたが期待する振る舞いであることを願っています。また、最初のバージョンのように「ジャンピー」ではなくなりました。

3つの新しい変数を作成しました。

var hovered    = false;
var animating  = false;
var correction = null;

1つ目は、要素の1つがホバーされたかどうかを格納し、2つ目はアニメーションが実行されているかどうかを格納し、3つ目は修正を使用する必要があるかどうかを格納します（左側またはライド側）。

何が起こっているかを追跡するために関数を更新したよりも：

$carouselNext.hover(function () {
    if (!animating)
        shunt('-=20');
    hovered = true;
    correction = 'next';
}, function () {
    if (!animating)
        shunt('+=20');
    hovered = false;
    correction = 'next';
});

クリックハンドルを更新したよりも：

$carouselNext.bind('click', function(e) {
    move(0);
    e.preventDefault();
});

そしてmove()-関数：

function move(dir, par) {
    if(!animating) {
        animating = true;
        if(dir == 0) {
            carousel.next();
        } else {
            carousel.prev();
        }
        setTimeout(function() {
            shunt( ( hovered ? '+=0' : ( 'next' == correction ? '+' : '-' ) + '=20' ) );
            animating = false;
        }, 1700);
    }
}

これがデモです-私が更新したすべてのものを手に入れてください。

デモ

jsfiddle

注：最初からの変数は、内で宣言できますfunction carousel_initCallback(carousel)-どういうわけか、フィドルに格納されていませんでした…</ p>

于 2012-08-13T16:48:07.473 に答える
0

次のボタンを10などに設定z-indexすると、常に一番上に表示されます。また、安全に再生するために画像を追加する部分もz-index0または1に追加します。

于 2012-08-16T19:57:28.020 に答える