1

おはようございます :) ここで問題が発生しました。すでに 2 日間首が痛いのです。ページ上でスライドする画像に bxSlider を使用しており、onAfterSlide コールバックで独自の関数を呼び出しています。1つのことを除いて、すべてが正常に機能します。スライドをすばやく切り替えると、関数が 2 ～ 3 回呼び出されます (ページに 3 つの画像があります)。これは、予期しない結果を返すため良くありません。マークアップが変更されたため、bxSlider の最新バージョンを使用できません。onAfterSlide コールバックが呼び出されたときにアニメーションがまだ終了していないため、これが発生すると思います。これは私が bxSlider を呼び出す方法です:

$('#slider_bx').bxSlider({
    mode: 'fade',
    speed: 1000,
    pause: 9000,
    auto: true,
    autoControls: false,
    prevText: '',
    nextText: '',
    autoHover: true,
    captions: false,
    pager: true,
    onBeforeSlide: function () {
        if ($('.slide_in').length) {
            $('.slide_in').hide();
        }
    },
    onAfterSlide: function () {
        if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
            doCrazyStuff();
        }
    }
});

そして、これは私の機能です:

function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        setTimeout(function () {
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}

どんな助けでも感謝します。ありがとう。

編集: を追加しようとしまし.stop()たが、役に立ちませんでした。

$this.show().stop();
$this.stop().show();
$this.stop().rotate({
    duration: 2000,
    angle: 90,
    animateTo: -20
});

$this.rotate({
    duration: 2000,
    angle: 90,
    animateTo: -20
}).stop(); // throws an error
4

3 に答える 3

1

コードを表示すると、問題はコードにあるとは思いませんが、 auto を true に設定しているため、プラグインタイマーは停止せず、定期的に画像をスライドさせています。したがって、カスタム関数で stopAuto() bxSlider 関数を使用すると問題が解決することを願っています。作業が終わったら、オートショーを開始することを忘れないでください。ありがとう

于 2013-01-13T05:03:42.787 に答える
1

を使用してみてください

$('.slide_in').stop()

スライド機能の後では、うまくいくことを願っています。可能であれば、フィドルでコードを提供してみてください。

于 2012-12-21T08:56:38.677 に答える
1

タイムアウトをキャンセルしたり、タイムアウトが実行されているかどうかを確認したりできます。
最後のタイムアウトのみを実行する場合:

var crazyTimeout;
function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        if (crazyTimeout != undefined) {
            clearTimeout(crazyTimeout); // Cancel previous timeout
        }
        crazyTimeout = setTimeout(function () {
            crazyTimeout = undefined;
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}

最初のタイムアウトのみを実行する場合:

var crazyTimeout;
function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        if (crazyTimeout != undefined) {
            return; // A timeout is still running: don't create new one
        }
        crazyTimeout = setTimeout(function () {
            crazyTimeout = undefined;
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}
于 2013-01-16T08:46:24.573 に答える