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”

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

如何转到下一张幻灯片jQuery

1 个答案: