循环一次并在第一张幻灯片上停止答案

【问题标题】：Cycle once and stop on the first slide循环一次并在第一张幻灯片上停止
【发布时间】：2014-08-11 14:35:37
【问题描述】：

我正在尝试让bxslider 循环播放三张幻灯片，然后返回到第一张幻灯片并在该位置停止幻灯片放映。我尝试了不同的代码位，但找不到任何专门解决此类操作的内容。任何帮助表示赞赏。

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

【问题讨论】：

请展示您尝试过的代码并描述您遇到的问题。
你有多少张幻灯片？

标签： javascript jquery html bxslider

【解决方案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);
            }
        }
    });
});

如果您只有三张幻灯片（如果您没有加入这一事实会对我们有所帮助），那么当infiniteLoop 关闭时，您可能不会收到onSlideNext 事件。在这种情况下，您可以使用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
            }
        }
    });
});

【讨论】：

为什么投反对票？我提供了两个选项，它们完全符合 OP 的要求。
我尝试使用您的第二段代码，但它在第三张幻灯片上停止并返回到第一张。我想看看我能不能让它工作。谢谢。
@Xochi - 您是否在控制台中遇到任何脚本错误？根据documentation for bxSlider，goToSlide() 方法应该允许您将其设置为您想要的任何幻灯片。
是的，这是三张幻灯片，抱歉！
感谢您的帮助，现在可以使用了。非常感谢 jfriend

【解决方案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

【讨论】：

谢谢，但这段代码不工作，我正在努力让它工作。