为了账号安全,请及时绑定邮箱和手机立即绑定

滚动滑屏成功的案例给大家做一个参考!

<DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.css"/>

    <style type="text/css">

    body{background: #fff;}

    .section1{text-align: center; background-color: orange;}

    .section2{text-align: center; background-color: green;}

    .section3{text-align: center; background-color: gray;}

    .section4{text-align: center; background-color: red;}

         .slide{text-align: center;}

       


    </style>

 </head>

<body>

  <div id="fullpage">

  <div class="section section1"><h1>这个是第一屏</h1></div>

  <div class="section section2">

        <div class="slide">这个是第二屏的第一页</div>

        <div class="slide">这个是第二屏的第二页</div>

        <div class="slide">这个是第二屏的第三页</div>

        <div class="slide">这个是第二屏的第四页</div>

    </div>

  <div class="section section3"><h1>这个是第三屏</h1></div>

  <div class="section section4"><h1>这个是第四屏</h1></div>

  </div>


 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

    $('#fullpage').fullpage();

    })

    </script>

</body>

</html>


正在回答

2 回答

感谢!?

0 回复 有任何疑惑可以回复我~

666

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
FullPage.js全屏滚动插件
  • 参与学习       43827    人
  • 解答问题       202    个

基于jQuery的全屏滚动效果插件,让翻页显得格外的高端大气上档次

进入课程

滚动滑屏成功的案例给大家做一个参考!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信