Javascript 设置TweenMax鼠标滚动幻灯片的动画

基本上，下面的代码基于ES6和TweenMax，工作正常，但我想修复滚动事件，比如鼠标向上滚动滑块从下到上设置动画（更改），然后鼠标向下滚动滑块从上到下设置动画

此外，我想改变滑块点击右中心导航的基础上

谢谢你

类滑块{
构造函数（）{
这是bindAll（）；
this.el=document.querySelector（“.js滑块”）；
this.inner=this.el.querySelector（“.js-slider\uuu-inner”）；
this.slides=[…this.el.queryselectoral（“.js slide”）；
this.bullets=[…this.el.queryselectoral（“.js滑块项目符号”）；
this.renderer=null；
this.scene=null；
this.clock=null；
this.camera=null；
这是一张图片=[
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg",
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg",
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg"
];
此参数。数据={
电流：0，
下一个:1,，
总计：this.images.length-1，
增量：0
};
此.state={
动画：错误，
文本：false，
首字母：正确
};
this.textures=null；
this.init（）；
}
bindAll（）{
[“render”，“nextSlide”].forEach（fn=>（this[fn]=this[fn].bind（this））；
}
设置样式（）{
this.slides.forEach（（幻灯片，索引）=>{
如果（索引==0）返回；
TweenMax.套装（幻灯片{
自动Alpha:0
});
});
this.bullets.forEach（（bullet，index）=>{
如果（索引==0）返回；
const txt=bullet.querySelector（“.js-slider-bullet\uuu text”）；
常量行=bullet.querySelector（“.js-slider-bullet\uu行”）；
TweenMax.set（txt{
阿尔法：0.25
});
TweenMax.组（线{
scaleX:0，
来源：“左”
});
});
}
摄像机设置（）{
this.camera=新的三点正交摄影机(
这是1.el.offsetWidth/-2，
本图为el.offsetWidth/2，
这是el.offsetHeight/2，
这个。el。离光/-2，
1.
1000
);
这个。摄像机。看（这个。场景。位置）；
这个.camera.position.z=1；
}
设置（）{
this.scene=新的三个.scene（）；
this.clock=新的3.clock（真）；
this.renderer=new THREE.WebGLRenderer({
阿尔法：是的
});
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.renderer.setSize（this.el.offsetWidth，this.el.offsetHeight）；
this.inner.appendChild（this.renderer.doElement）；
}
loadTextures（）{
const loader=new THREE.TextureLoader（）；
loader.crossOrigin=“”；
this.textures=[]；
this.images.forEach（image=>{
const texture=loader.load（image+“？v=“+Date.now（），this.render）；
texture.minFilter=THREE.LinearFilter；
这个.textures.push（纹理）；
});
this.disp=loader.load(
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png",
这个.渲染
);
this.disp.magFilter=this.disp.minFilter=this.LinearFilter；
this.disp.wrapps=this.disp.wrapT=THREE.RepeatWrapping；
}
createMesh（）{
this.mat=新的3.ShaderMaterial({
制服：{
dispower：{
类型：“f”，
数值：0.0
},
强度：{
类型：“f”，
数值：0.5
},
纹理1：{
类型：“t”，
值：this.textures[0]
},
结构2：{
类型：“t”，
值：this.textures[1]
},
显示：{
类型：“t”，
值：this.disp
}
},
透明：是的，
vertexShader:document.querySelector（“#vertexShader”）.textContent，
fragmentShader:document.querySelector（“fragmentShader”）.textContent
});
常数几何体=新的三点几何体(
这是偏网宽度，
这是艾尔·奥赛特的作品，
1.
);
const mesh=新的三个.mesh（几何体，this.mat）；
this.scene.add（网格）；
}
transitionNext（）{
TweenMax.至（此。mat.制服。dispPower，2.5{
价值：1，
ease:Expo.easeInOut，
onUpdate:this.render，
未完成：（）=>{
this.mat.uniforms.dispower.value=0.0；
这个.changeTexture（）；
这个.render.bind（这个）；
this.state.animating=false；
}
});
const current=this.slides[this.data.current]；
const next=this.slides[this.data.next]；
const currentImages=current.querySelectorAll（“.js-slide\uu img”）；
const nextImages=next.querySelectorAll（“.js-slide\uu img”）；
const currentText=current.querySelectorAll（“.js-slider\uu text-line div”）；
const nextText=next.querySelectorAll（“.js-slider\uu text-line div”）；
const currentbill=this.bullets[this.data.current]；
const nextBullet=this.bullets[this.data.next]；
常量currentBulletTxt=currentBullet.querySelectorAll(
“.js-slider-bullet\uuuu text”
);
const nextBulletTxt=nextBullet.querySelectorAll(
“.js-slider-bullet\uuuu text”
);
常量currentBulletLine=currentBullet.querySelectorAll(
“.js-slider-bullet\u行”
);
const nextBulletLine=nextBullet.querySelectorAll(
“.js-slider-bullet\u行”
);
常数tl=新的时间线最大值({
暂停：对
});
if（此.state.initial）{
TweenMax.至（“.js滚动”，1.5{
yPercent:100，
阿尔法：0，
ease:Power4.easeInOut
});
this.state.initial=false；
}
热释光
.从(
当前图像，
1.5, {
yPercent:0，
比例：1
}, {
yPercent:-185，
斯卡利：1.5，
ease:Expo.easeInOut
},
0.075
)
.到(
当前公告TXT，
1.5, {
阿尔法：0.25，
轻松：线性。轻松无
},
0
)
.设置(
时事简报{
来源：“对”
},
0
)
.到(
当前BU
var prevY = 0;
var newY = 0;

nextSlide(event) {
    newY = event.deltaY;

    if(newY > prevY){
        slideDown();
    }else if(newY < prevY) {
        slideUp();
    }

    // Store deltaY into prevY for comparison on next scroll
    prevY = event.deltaY;
}