Question

有没有办法在bxslider中的每张幻灯片之间保持不同的延迟时间？假设我在bxslider中有4张幻灯片我想在第1张和第2张幻灯片之间延迟1000毫秒，在第3张和第4张幻灯片之间延迟2000毫秒。

这可能吗？

Answer 1

这可能是可能的，但不是很漂亮。基本上，就我在bxslider的documentatin中所知，你不能为特定的单个幻灯片转换间隔设置时间。所以，这就是你的概率。需要在JavaScript中使用事件处理程序：

假设CSS选择器.bxslider获取了包含滑块内容的HTML元素，并且想要缩短（2000毫秒）的幻灯片转换是第三张到第四张幻灯片仅 .. 。假设您已经设置并初始化了滑块，您的解决方案可以如下（elipses表示您将设置/已经设置的其他选项，即我'光泽过度'：

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);
        }
    }
});

基本上，当我们点击第3张幻灯片时，我们会停止自动播放，这样我们就可以手动控制幻灯片“状态”持续时间。当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]);
}

}

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

3 个答案: