Question

我正在尝试通过三张幻灯片进行bxslider循环，然后返回到第一张幻灯片并停止幻灯片显示在该位置。我尝试了不同的代码，但我找不到任何专门针对这种行为的东西。任何帮助表示赞赏。

$(document).ready(function(){
$('.bxslider').bxSlider({
    auto: true,
    autoControls: true,
    pause: 5000,
    slideMargin: 0
    });
});

Answer 1

我能想到的最简单的方法是在末尾插入第一张幻灯片的第二个副本，这样你就有三张幻灯片，然后是第一张副本，你告诉它不要自动重复。

$(document).ready(function() {
    $('.bxslider').bxSlider({
        auto: true,
        autoControls: true,
        pause: 5000,
        infiniteLoop: false,   // don't auto-repeat
        slideMargin: 0
    });
});

除此之外，您可以指定回调，在第三张幻灯片完成显示后，您可以停止自动前进，然后告诉它转到第一张幻灯片。

$(document).ready(function() {
    var slider = $('.bxslider').bxSlider({
        auto: true,
        autoControls: true,
        pause: 5000,
        infiniteLoop: false,
        slideMargin: 0,
        onSlideNext: function($slideElement, oldIndex, newIndex) {
            if (newIndex >= 3) {
                slider.stopAuto();
                slider.goToSlide(0);
            }
        }
    });
});

如果你只有三张幻灯片（事实上你还没有帮助我们），那么当onSlideNext关闭时，你可能无法获得infiniteLoop事件。在这种情况下，您可以使用onSlideAfter方法并在显示第三张幻灯片后触发。

$(document).ready(function() {
    var slider = $('.bxslider').bxSlider({
        auto: true,
        autoControls: true,
        pause: 5000,
        infiniteLoop: false,
        slideMargin: 0,
        onSlideAfter: function($slideElement, oldIndex, newIndex) {
            if (newIndex >= 2) {
                slider.stopAuto();
                setTimeout(function() {
                    slider.goToSlide(0);
                }, 5000);    // put whatever time here you want the 3rd slide to show
            }
        }
    });
});

Answer 2

您是否使用回调尝试过此操作？

 var slider =  $('.bxslider').bxSlider(options); //your default options here.
 $('.bxslider').bxSlider({
  onSlideAfter: function($slideElement, oldIndex, newIndex){
    //if slide number is 3
    if(newIndex === 2){
       slider.goToSlide(0);
       slider.stopAuto();
    }
  });

这段代码的作用是，一旦幻灯片改变就会回调onSlideAfter函数。如果幻灯片索引是3，那么代码将在转到第一张幻灯片后停止自动播放..

使用过的回调和方法：

onSlideAfter（回调）
goToSlide（方法）

参考此处：http://bxslider.com/options

循环一次，然后停在第一张幻灯片上

2 个答案: