2013-03-08 63 views
0

我們要動態地更新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可在文件的負載(即第一次)。不知道什麼是錯誤或我們正在做它完全錯誤。請爲它提出一個解決方案。

+0

你是什麼意思動態?在初始化後更改行爲? – kidwon 2013-03-08 14:35:54

+0

是的我在初始化時更改了它,初始化後我點擊了函數。這是一個模板生成器應用程序,用戶可以在其中創建** HTML **模板。在這裏他可以選擇幻燈片並設置首選項以顯示因此,當他選擇一個選項或點擊一個按鈕時,我需要更改這些參數。 – coderunner 2013-03-08 14:49:40

回答

2

只需在初始化滑塊之前銷燬節點並替換它。

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

我沒有完全明白你的意思。請你詳細說明一下吧! – coderunner 2013-03-08 14:53:13

+0

它似乎只有一次,第二次嘗試不會覆蓋行爲,所以沒有提供'destroy'方法。剩下的就是刪除DOM元素,因爲舊數據綁定了它,並用一個新的新數據代替它,然後再次將其設置爲滑塊。 – kidwon 2013-03-08 14:55:34