如何修復腳本？

Question

https://jsfiddle.net/fnethLxm/10/

$(document).ready(function() { 
    parallaxAuto() 
}); 
function parallaxAuto() { 
    var viewer  = document.querySelector('.viewer.active'), 
    frame_count = 5, 
    offset_value = 500; 

    // init controller 
    var controller = new ScrollMagic.Controller({ 
     globalSceneOptions: { 
     triggerHook: 0, 
     reverse: true 
     } 
    }); 

    // build pinned scene 
    var scene = new ScrollMagic.Scene({ 
     triggerElement: '#sticky', 
     duration: (frame_count * offset_value) + 'px', 
     reverse: true 
    }) 
    .setPin('#sticky') 
    //.addIndicators() 
    .addTo(controller); 

    // build step frame scene 
    for (var i = 1, l = frame_count; i <= l; i++) { 
     new ScrollMagic.Scene({ 
      triggerElement: '#sticky', 
      offset: i * offset_value 
     }) 
     .setClassToggle(viewer, 'frame' + i) 
     //.addIndicators() 
     .addTo(controller); 
    } 

    $(".right_arrr").click(function(){ 
     var block = $(this).siblings('.secondSlider'); 
     el = block.find(".active"); 
     elNum = el.attr("data-num"); 
     if(elNum < block.find('.slide').length) { 
      elNum++; 
     } else { 
      elNum=1; 
     } 
     hideShow(elNum, block); 
     alert('slide №' + elNum) 
     scene = scene.destroy(true); 
     scene = null; 
     controller.destroy(true); 
     controller = null; 
     parallaxAuto(); 
    }); 
    $(".left_arrr").click(function(){ 
     var block = $(this).siblings('.secondSlider'); 
     el = block.find(".active"); 
     elNum = el.attr("data-num"); 
     if(elNum > 1) { 
      elNum--; 
     } else { 
      elNum=block.find('.slide').length; 
     } 
     hideShow(elNum, block); 
     scene = scene.destroy(true); 
     scene = null; 
     controller.destroy(true); 
     controller = null; 
     parallaxAuto(); 
    }); 
    function hideShow(num, block) { 
     block.find("div.active").removeClass("active").animate({ opacity: 0,},300); 
     block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300); 
    } 
}; 

你可以看到，在1和2幻燈片插件迎刃而解，但在幻燈片3這是行不通的。和錯誤「無法讀取屬性'銷燬'空」 我坐了幾天，我不明白 如何解決這個問題？

Answer 1

我看到2個問題：

• 你設置場景和控制器null每個右/左擊，並要求它重新初始化再呼叫parallaxAuto;
• 每當您撥打parallaxAuto時，您都會重新綁定偵聽器。

我自由地爲你重寫它，所以聽衆只會綁定一次：https://jsfiddle.net/j6u6wp7x/。我只是隔離了重新初始化控制器和場景的部分，因此您可以在點擊結束時調用它，而無需重新綁定事件。