0

コンテンツのスライドショーがあります:

スライド コンテナ
|--> ラッパー
|------> スライド 1、スライド 2 など

これは、ラッパーの位置 X とスライドの位置 X を計算して、コンテナーのビューポート内に表示される次/前のスライドのラッパーをスライドする場所を決定するのと同じくらい簡単に機能します。それはかなり簡単です。

Firefox と Chrome では、CSS3 transform と transition-duration を使用してスライドをアニメーション化しています。すべてが完璧に機能します。ほとんど。

問題は、次のボタンを非常に速くクリックした場合のみです。私はjQueryを使用しています

$(selector).position().left

スライドの位置 X (左) を読み取り、位置が0になります(予想されるのではなく、たとえば 300px)。ユーザーが速すぎるのを防ぐフラグ isAnimating がありますが、それも役に立ちません。コンテンツのスクロールが速すぎるのを防ぎますが、他の何かが原因で決定に失敗したかのように、残りの位置が0のままになる場合があります。

簡単な検索を行ったところ、画像が読み込まれている場合、読み込みが完了するまでその位置を特定できないブラウザがあることがわかりました。ただし、各スライドには画像がありますが、その中にあります。スライドの CSS では、すべての幅と余白が適切に設定されているようです。

問題は、私が説明したシナリオに基づいてなぜこれが起こっているのか、そして Firefox や Chrome ブラウザーで常に位置 X を決定するために何が改善できるのかということです。

4

1 に答える 1

0

私は、offsetLeftが常に信頼できるわけではない場合、要素の幅とコンテナー内のそのインデックス位置を使用して、位置 X を把握できると判断しました。

var newWrapperPos = undefined;
$(lotWrapper).children('div').each(function(index){
        if($(this).attr("id") === "slot"+id){
            var width = $(this).width();
            newWrapperPos = index * width;
            return false;
        }
    }); 
//now I can shift wrapper to position = newWrapperPos

申し訳ありませんが、コードを共有できませんでした。関連するすべての機能をはぎ取るには少し時間がかかります。しかし、誰かがより良い答えを持っているなら、私に知らせてください. 今のところ、これは私にとってはうまくいきます。

于 2012-09-27T17:36:52.933 に答える