javascript - 如何转到下一张幻灯片 jQuery

Question

我对这段代码有疑问:Codepn project

我希望每次向下滚动时都能看到下一部分。与此同时，只有第二个正在显示......

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

我想得到的效果:LOOK THIS WEBSITE

显示我正在使用:

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
    }
}

goNextSlide 函数:

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”

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