如何在 bxslider 中指定幻灯片之间的不同延迟答案

【问题标题】：How to specify different delays between slides in bxslider如何在 bxslider 中指定幻灯片之间的不同延迟
【发布时间】：2013-07-01 15:24:45
【问题描述】：

在 bxslider 中遇到以下问题 - 如何在自动放映的幻灯片之间应用不同的延迟？

【问题讨论】：

标签： delay transition wait space bxslider

【解决方案1】：

我想出了以下解决方案，我将在这里展示：

在 jquery.bxslider.js 中替换：

 el.startAuto = function(preventControlUpdate){
        // if an interval already exists, disregard call
        if(slider.interval) return;
        // create an interval
        slider.interval = setInterval(function(){
            slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
        }, slider.settings.pause);
        // if auto controls are displayed and preventControlUpdate is not true
        if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
    }

有

     /**EDITS: By CRB - techdude **/
    el.startAuto = function(preventControlUpdate){
        el.continueAuto();
    }

    el.continueAuto = function(){
        //get how long the current slide should stay
        var duration = slider.children.eq(parseInt(slider.active.index)).attr("duration");
        if(duration == ""){
            duration = slider.settings.pause;
        } else {
            duration = parseInt(duration);
        }
        console.log(duration);

        // create a timeout
        slider.timer = setTimeout(function(){
            slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
            el.continueAuto();
        }, duration);
        // if auto controls are displayed and preventControlUpdate is not true
        if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');

    }

    //*End Edits*/

然后要更改幻灯片的持续时间，只需为其 li 标签赋予一个持续时间属性，如下所示：其中 duration 是幻灯片暂停的毫秒数。

要设置默认持续时间，只需使用设置中的 pause: 选项：

$("element").bxSlider({
  auto:true,
  pause: 4000
};

希望这会有所帮助。也许 bx 滑块甚至会将其添加到未来的版本中。 :)

【讨论】：

啊 - 对此抱有希望，但由于某种原因，它似乎不允许页面上有多个 bxslider...
@Garry Schafer，您需要做的就是修改它，以便为每个滑块设置不同的超时对象。应该很好用。

【解决方案2】：

什么是

你用来接这个？有什么办法可以说明它的工作原理吗？

【讨论】：

【解决方案3】：

也许这将有助于澄清：原则上，它的工作方式是我用 setTimeout 更改 setInterval，以便每次都可以更改间隔。

让多个元素在一个页面上工作的关键是不使用slider.timer 对象，但可能使用el.timer 对象，所以该行会读到类似的内容，

 el.timer = setTimeout(function(){
        slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
        el.continueAuto();
    }, duration);

代替

 slider.timer = setTimeout(function(){
        slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
        el.continueAuto();
    }, duration);

我没有使用多个滑块对其进行测试，但请告诉我这是否有效。反正就是这个原则。然而，唯一的问题是，我认为您需要修改 el.pause 方法以同时使用 el.timer，否则幻灯片无法暂停。我认为这就是我这样做的原因。不过，那是很久以前的事了。

【讨论】：