如何转到下一张幻灯片 jQuery.

Question

我对这段代码有问题：Codepn 项目

我希望每次向下滚动时都出现下一部分。同时，只有第二个显示...

我还希望它使用鼠标滚动顶部返回上一张幻灯片

我想得到的效果： 看看这个网站

以显示我正在使用：

function handleMouseWheelDirection( direction )
{
console.log( direction ); // see the direction in the console    
if ( direction == 'down' ) {
goNextSlide();        
} else if ( direction == 'up' ) {
goPrevSlide();    
} else {
// this means the direction of the mouse wheel could not be determined
}
}

goNext幻灯片功能：

const goNextSlide = () =>{
TweenMax.to(sectionMain, 2, {x:0, y:-100} );
TweenMax.to(slide1, 0, {delay:0.4, x:0, y:0, ease: Power4.easeOut, display:"block" } );        
}

请看一下Codepen，以更好地理解我。有什么想法吗？谢谢。

Answer 1

我认为您应该添加一个索引来标识用户当前所在的部分。

例如像这样：

var caseIndex = 0;
const numOfSections = 3;
function handleMouseWheelDirection( direction )
{
if(caseIndex < numOfSections) {
caseIndex++;    
}else{
caseIndex=0 
} 
if ( direction == 'down' ) {
goNextSlide(caseIndex);
} else if ( direction == 'up' ) {
goPrevSlide();
} else {
// this means the direction of the mouse wheel could not be determined
}
}

然后，当您滑动到下一个滚动时 - 由其索引标识：

const goNextSlide = (slideIndex) =>{
TweenMax.to(sectionMain, 2, {x:0, y:-100*slideIndex} );
TweenMax.to(eval('slide'+slideIndex), 0, {delay:0.4, x:0, y:0, ease: Power4.easeOut, display:"block" } );
}

在我的示例中，"section_main"更改为"case_0">

所以这是下一张幻灯片的基本工作，你明白了，所以试着对上一张幻灯片做同样的事情。