Py学习  »  Jquery

如何转到下一个幻灯片jQuery

Simon • 5 年前 • 1597 次点击  

我对这个代码有问题: 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
    }
}

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" } );        
}

请看代码笔,以便更好地理解我。有什么想法吗?谢谢。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/53386
 
1597 次点击  
文章 [ 1 ]  |  最新文章 5 年前
Elad
Reply   •   1 楼
Elad    5 年前

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

例如,像这样的:

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

所以这是下一个幻灯片的基本工作,你得到了这个想法,所以试着对上一个做同样的工作。