1

大家早上好 :) 我这里有一个问题，我的脖子已经痛了 2 天了。我正在使用 bxSlider 让图像在页面上滑动，并且在 onAfterSlide 回调中调用我自己的函数。除了一件事，一切都很好。当我在幻灯片之间快速切换时，我的函数被调用了 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

尝试使用

$('.slide_in').stop()

在幻灯片功能之后，我希望它可以工作，如果可能的话，尝试在小提琴中提供代码，这将很容易提供帮助。

于 2012-12-21T08:56:38.677 回答
1

查看您的代码我认为问题不在于您的代码：但是由于您已将 auto 设置为 true，因此插件计时器不会停止并且会在其定期间隔内滑动图像。所以我希望在您的自定义函数中使用 stopAuto() bxSlider 函数可以解决问题。完成工作后不要忘记开始车展。谢谢

于 2013-01-13T05:03:42.787 回答
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 回答