Question

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

Answer 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滑块甚至会将它添加到未来的版本中。：）

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，否则幻灯片放映不能暂停。我认为这就是我按照我的方式做到的原因。然而，这是很久以前的事了。

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

3 个答案: