如何修复脚本？

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/。我只是隔离了重新初始化控制器和场景的部分，因此您可以在点击结束时调用它，而无需重新绑定事件。