Question

整天都在努力寻找适合我需求的插件或尝试自己构建一些东西。我已经设置了基础知识，我只是试图获得一个很好的平滑过渡，而不是一个不和谐的跳转到锚。

<!-- HTML -->
<div id="content-container">
    <div class="slide" id="home">

    </div>
    <div class="slide" id="about">

    </div>
    <div class="slide" id="musings">

    </div>
    <div class="slide" id="socials">

    </div>
    <div class="slide" id="contact">

    </div>

 /* CSS */
#content-container{
    height: 100%;
    width: 500%;
}
#home{   
    background: url(assets/slide1.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 0;
}
#about{   
    background: url(assets/slide2.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}
#musings{   
    background: url(assets/slide3.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}
#socials{   
    background: url(assets/slide4.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 3;
}
#contact{   
    background: url(assets/slide5.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 4;
}
.slide{
    height: 100%;
    width: 20%;
}

我试图上班的是一组基本按钮，用于控制从右侧滑入的按钮。如果我能让他们根据我正在看哪一个/我移动哪一个来左/右滑动，那也是一个奖励。过去几个小时没有运气不停的研究。

Answer 1

你试过JQuery Cycle吗？特别是this page

根据点击事件滑动div

1 个答案: