如何在bxslider中指定不同的幻灯片延迟

Question

在bxslider中遇到了以下问题-如何在车展中的幻灯片之间应用不同的延迟？

Answer 1

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

在jquery.bxslider.js replace中：

 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属性:其中duration是幻灯片暂停的毫秒数。

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

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

希望这能有所帮助。也许bx slider甚至会把它添加到未来的版本中。:)

Answer 2

什么是

你要用

• 来拿这个吗？有没有办法证明它的工作原理？--

Answer 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，否则幻灯片无法暂停。我想这就是我为什么这么做的原因。然而，那是很久以前的事了。