0

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

4

3 回答 3

2

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

在 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 标签赋予一个如下所示的持续时间属性： 其中，持续时间是幻灯片暂停的毫秒数。

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

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

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

于 2013-07-01T15:24:45.990 回答
0

What are the

  • you're using to pick this up? Any way you can put up a gist of it working?

    • 于 2013-09-26T02:22:03.650 回答
    0

    也许这将有助于澄清：原则上，它的工作方式是我用 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，否则幻灯片无法暂停。我认为这就是我这样做的原因。然而，那是很久以前的事了。

    于 2014-03-29T14:51:13.637 回答