如何转到下一张幻灯片 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”

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