2016-04-26 6 views
2

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 не работает. и ошибка «Не могу прочитать свойство« destroy »null» Несколько дней дольше я сижу, и я не могу понять как исправить это?

ответ

1

Я вижу 2 вопроса:

  • вы устанавливаете сцену и контроллер для null на каждом правой/левой кнопкой мыши, и требуют повторной инициализации его повторно призывающую parallaxAuto;
  • каждый раз, когда вы вызываете parallaxAuto, вы повторно связываете слушателей.

Я взял на себя свободу переписать его для вас, чтобы слушатели были связаны только один раз: https://jsfiddle.net/j6u6wp7x/. Я просто выделил часть, в которой вы перезапустили контроллер и сцену, чтобы вы могли вызвать ее в конце щелчка без повторной привязки событий.

+0

Я могу задать другой вопрос? @reallynice –

+0

Если да, то давайте сделаем еще несколько исправлений к этому скрипту. В противном случае было бы лучше задать новый вопрос. – reallynice

+0

Как сделать переход на новый слайд, все началось с самого начала? И теперь, если вы перейдете на слайд 2 и 3, будет показано, как мы остановились на одном слайде. @reallynice –

 Смежные вопросы

  • Нет связанных вопросов^_^