Question

我正在使用nivoSlider插件在客户的网站上幻灯片放映横幅。我需要为每张幻灯片设置不同的延迟时间。我发现了这个解决方案：

var nivoSliderDelays = [5000,2000,3500];

function setDelay() {
 var currentSlide = $('#slider').data("nivo:vars").currentSlide;
 setTimeout(function () {
  $('#slider').find('a.nivo-nextNav').click()
 }, window.nivoSliderDelays[currentSlide]);
}

$('#slider').nivoSlider({
 pauseTime: 3000,
 startSlide: 0,
 directionNav: true,
 controlNav: true,
 controlNavThumbs: false,
 pauseOnHover: false,
 manualAdvance: true,
 beforeChange: function(){},
 slideshowEnd: function(){},
 lastSlide: function(){},
 afterLoad: function(){ setDelay() },
 afterChange: function(){ setDelay() }
});

这似乎工作正常，你可以在client's website看到。问题是，如果您按controlNav或directionNav导航，则脚本会生气。所有设定的延迟似乎都变为无法解释的短时间，每张幻灯片都有不同的时间。

由于客户端有能力通过CMS更改每张幻灯片的时间，我不得不将nivoSliderDealys设置为全局JavaScript变量，您认为这可能是问题吗？我还有其他机会从scripts.js访问存储在MySQL数据库中的变量吗？

Answer 1

你的问题可能是通过controlNav属性造成的，我刚刚更新了nivoSlider函数中的部分代码，你可以添加并尝试。

$('#slider').nivoSlider({       
        animSpeed: 300,                 // Slide transition speed
        pauseTime: 3000,               // How long each slide will show
        pauseOnHover: false,             // Stop animation while hovering
        manualAdvance: true,           // Force manual transitions
        prevText: '<',                // Prev directionNav text
        nextText: '>',                // Next directionNav text
        randomStart: false,             // Start on a random slide
        beforeChange: function(){},     // Triggers before a slide transition
        slideshowEnd: function(){},     // Triggers after all slides have been shown
        lastSlide: function(){},        // Triggers when last slide is shown
        afterLoad: function(){ setDelay() },
        afterChange: function(){ setDelay() }
    });

问题是由以下属性引起的：）

    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,

Javascript Nivo Slider不同的幻灯片时间

1 个答案: