javascript - 如何在 bxslider 中的每张幻灯片之间应用不同的延迟

Question

有没有办法在 bxslider 中的每张幻灯片之间保持不同的延迟时间？假设我在 bxslider 中有 4 张幻灯片，我希望在第一张和第二张幻灯片之间延迟 1000 毫秒，在第三张和第四张幻灯片之间延迟 2000 毫秒。

这可能吗？

Answer 1

这可能是可能的，但并不漂亮。基本上，据我从 bxslider 的文档中可以看出，您无法为特定的单个幻灯片转换间隔设置时间。所以，这就是你要试探的。需要在 JavaScript 中使用事件处理程序：

假设 CSS 选择器.bxslider到达包含您的滑块内容的 HTML 元素，并且您想要变慢的幻灯片过渡（2000 毫秒）仅是第三到第四张幻灯片......并且假设您已经设置并初始化了您的滑块，您的解决方案可能如下（省略号表示您将设置/您已经设置的其他选项，我正在掩饰）：

var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: 1000,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (newIndex === 2) { // remember, it's zero based indices with bxslider...
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(3);
                slider.startAuto();
            }, 2000);
        }
    }
});

基本上，当我们点击第三张幻灯片时，我们会停止自动播放，以便我们可以手动控制幻灯片“存在”持续时间。当 2000 毫秒结束时，我们手动将滑块移动到下一帧，然后重新开始自动播放。如果您有一个更大的幻灯片放映，并且想以更有条理的方式进行，它会/可能看起来像这样：

var params = {
    defaultSpeed: 1000,
    speedOverrides: {
        "2": 2000
        // you can add other slides here,
        // with the slide number used being the
        // first slide of the slide transition,
        // i.e., modifying the speed of 3-4, like
        // above means you'd enter "2" as the
        // property name, b/c again we're using
        // 0-based indices.
    }
};
var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: params.defaultSpeed,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (params.speedOverrides[newIndex]) {
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(newIndex + 1);
                slider.startAuto();
            }, params.speedOverrides[newIndex]);
        }
    }
});

Answer 2

通过对 bxslider.js 文件进行小的编辑，我想出了一种非常灵活的方法来做到这一点。这是我的答案的详细信息：https ://stackoverflow.com/a/17408119/700111

Answer 3

使用 SlideBefore。上面答案中的代码将停在最后一张幻灯片上。

onSlideBefore: function (slide, oldIndex, newIndex) {
if (params.speedOverrides[newIndex]) {
    slider.stopAuto();
    setTimeout(function () {
        slider.goToSlide(newIndex);
        slider.startAuto();
    }, params.speedOverrides[newIndex]);
}

}