首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何修复脚本?

如何修复脚本?
EN

Stack Overflow用户
提问于 2016-04-26 06:28:36
回答 1查看 72关注 0票数 3

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

代码语言:javascript
运行
复制
$(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,它不工作。而错误“不能读取属性‘破坏’的空”几天后,我坐着,我不知道如何解决这个问题?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-26 06:51:11

我看到两个问题:

  • 您正在将场景和控制器设置为null,每单击一次左右键,并要求重新输入它,重新调用parallaxAuto
  • 每次调用parallaxAuto时,都会重新绑定侦听器。

我为您自由地重写了它,这样侦听器就只能绑定一次:https://jsfiddle.net/j6u6wp7x/。我刚刚隔离了您重新输入控制器和场景的部分,这样您就可以在单击结束时调用它,而无需重新绑定事件。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36856887

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档