2014-10-10 114 views
0

我在尋找重新啓動和停止自定義jQuery滑塊的解決方案。自定義jQuery滑塊的停止和重新啓動功能

我已插入自定義jQuery的滑塊從這裏:http://jsfiddle.net/mjaA3/1662/

我已經使用滑塊在同一頁三個幻燈片。 這三個幻燈片放在三個按鈕的內部,它們在激活時播放電影,並在電影播放時顯示按鈕內的幻燈片 。

當這三個按鈕中的另一個被激活時,我想讓這些按鈕內的幻燈片重置(並停止), 。

現在,幻燈片顯示從單擊按鈕 時調用的函數開始。但它仍然需要重新設置,否則它會疊加(並且仍在播放)。

這是小提琴的縮短代碼:

var triggers = window.vorher.find('.fortschrittwrap .note'); 
    var images = window.vorher.find('.notificationwrap .ce_text'); 
    var lastElem = triggers.length-1; 
    var target; 

    triggers.first().addClass('active'); 
    images.hide().first().show(); 

    function sliderResponse(target) { 
     images.fadeOut(300).eq(target).fadeIn(300); 
     triggers.removeClass('active').eq(target).addClass('active'); 
    } 

    triggers.click(function() { 
     if (!$(this).hasClass('active')) { 
      target = $(this).index(); 
      sliderResponse(target); 
      resetTiming(); 
     } 
    }); 



    function sliderTiming() { 
     target = window.vorher.find('.fortschrittwrap .note.active').index(); 
     target === lastElem ? target = 0 : target = target+1; 
     sliderResponse(target); 
    } 

    var timingRun = setInterval(function() { sliderTiming(); },5000); 
    function resetTiming() { 
     clearInterval(timingRun); 
     timingRun = setInterval(function() { sliderTiming(); },5000); 
    } 

回答

0

我能夠用連接至clickEvent功能的內部clearInterval(timingRun)做到這一點!