动态更新NIVO滑块参数

问题描述：

我们要动态地更新NIVO滑块过渡类型，停顿时间等。我们呼吁在link.This的click事件的函数的功能是：动态更新NIVO滑块参数

function fnSetPauseTime(navType) { 
    var getSec = $('#setSliderTime').val(); 
    getSec = (getSec) * 1000; 

    var sliderId = $('#' + IdParent).children().attr('id'); 
    $('#' + sliderId).attr('pauseTime', getSec); 
    var transType = $('#changeTrans').val(); 
    //var transType = $('.controlNav').is('checked'); 
    var getSec = $('#setSliderTime').val(); 
    slideShow(sliderId, getSec, transType, navType); 
}

这是调用上述功能

$('.controlNav').click(function() { 
    var navType = $(this).val(); 
    if (navType == 'thumbNav') { 
     navType = 'true'; 
    } else { 
     navType = 'false'; 
    } 
    fnSetPauseTime(navType); 
    //slideShow(sliderId, ''); 
});

这click事件在NIVO-slider.js文件的默认幻灯片功能。

function slideShow(sliderId, getSec, transType, navType) { 
    $('#' + sliderId).nivoSlider({ 
    effect: 'random', 
    slices: 15, 
    boxCols: 8, 
    boxRows: 4, 
    animSpeed: 500, 
    pauseTime: 3000, 
    startSlide: 0, 
    directionNav: navType, 
    controlNav: navType, 
    controlNavThumbs: navType, 
    pauseOnHover: true, 
    manualAdvance: false, 
    prevText: 'Prev', 
    nextText: 'Next', 
    randomStart: false, 
    beforeChange: function() {}, 
    afterChange: function() {}, 
    slideshowEnd: function() {}, 
    lastSlide: function() {}, 
    afterLoad: function() {} 
    }); 
}

问题：我们既不能够动态更新参数我们也不得到任何错误it.It可在文件的负载（即第一次）。不知道什么是错误或我们正在做它完全错误。请为它提出一个解决方案。

你是什么意思动态？在初始化后更改行为？ – kidwon 2013-03-08 14:35:54

是的我在初始化时更改了它，初始化后我点击了函数。这是一个模板生成器应用程序，用户可以在其中创建** HTML **模板。在这里他可以选择幻灯片并设置首选项以显示因此，当他选择一个选项或点击一个按钮时，我需要更改这些参数。 – coderunner 2013-03-08 14:49:40

答

只需在初始化滑块之前销毁节点并替换它。

//Save the DOM node before a slider is binded to it 
var slider = $('#' + sliderId).clone(); 

function slideShow(sliderId, getSec, transType, navType) { 
    var newSlider = slider.clone(), 
    var oldSlider = $('#' + sliderId); 
    oldSlider.after(newSlider); 
    oldSlider.remove(); 

    newSlider.nivoSlider({ 
     ... 
    } 
}

我没有完全明白你的意思。请你详细说明一下吧！ – coderunner 2013-03-08 14:53:13

它似乎只有一次，第二次尝试不会覆盖行为，所以没有提供'destroy'方法。剩下的就是删除DOM元素，因为旧数据绑定了它，并用一个新的新数据代替它，然后再次将其设置为滑块。 – kidwon 2013-03-08 14:55:34

动态更新NIVO滑块参数

相关推荐