动态更新 nivo 滑块参数答案

【问题标题】：Dynamically updating the nivo slider parameters动态更新 nivo 滑块参数
【发布时间】：2013-03-08 14:09:02
【问题描述】：

我们想要动态更新 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, '');
});

这是 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 () {}
  });
}

问题：我们既不能动态更新参数，也没有得到任何错误。它适用于文件加载（即第一次）。不确定是什么错误或我们做错了。请提出解决方案。

【问题讨论】：

动态是什么意思？初始化后改变行为？
是的，我在初始化时更改它，我在初始化后点击调用该函数。这是一个模板构建器应用程序，用户可以在其中创建 HTML 模板。他可以在这里选择幻灯片并设置要在网站上显示的首选项。因此，当他选择选项或单击按钮时，我需要更改参数。

标签： javascript jquery plugins nivo-slider

【解决方案1】：

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

//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({
      ...
   }   
}

【讨论】：

我没有完全理解你。你能详细说明一下吗！
它似乎只初始化一次，第二次尝试不会覆盖该行为，因此也没有提供 destroy 方法。剩下的就是删除 DOM 元素，因为旧数据已绑定到它，并用新的数据替换它，然后再次使其成为滑块。