jquery全屏点击按钮滚动翻页

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div id="single">

  <div data-target="home" id="home">

    <div class="content-resizer">

      <h1 id="logo">第一页</h1>

      <h2 class="message">Are you ready to take the tour?</h2>

      <a href="#" data-link="about" class="btn-normal">内容开始</a>

    </div>

  </div>

  <div data-target="about" id="about">

    <div class="content-resizer">

      <h2 class="message">第二页</h2>

      <a href="#" data-link="home" class="btn-normal">Back</a> <a href="#" data-link="examples" class="btn-normal">下一页</a> </div>

  </div>

  <div data-target="examples" id="examples">

    <div class="content-resizer">

      <h2 class="message">第三页</h2>

      <img src="images/assassin.jpg" id="img-example" class="img-rounded" data-img="true

      <span class="alt-img"></span>

      <a href="#" data-link="about" class="btn-normal">Back</a> <a href="#" data-link="contact" class="btn-normal">下一页</a> </div>

  </div>

  <div data-target="contact" id="contact">

    <div class="content-resizer">

      <h2 class="message">第四页</h2>

      <a href="#" data-link="examples" class="btn-normal">Back</a> <a href="#" data-link="home" class="btn-normal">返回第一页</a> </div>

  </div>

</div>

4、书写css代码。

* { padding: 0; margin: 0; }

body { background: #034368; }

#logo, .message { color: #fff; }

#logo { font-size: 100px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }

.message { font-size: 40px; margin: 20px 0; }

.btn-normal { padding: 8px 20px; border-radius: 5px; background: #56bffc; color: #fff; text-decoration: none; font-family: "Lucida Sans", sans-serif; }

.content-resizer { width: 940px; margin: 0 auto; }

.img-rounded { border-radius: 5px; margin: 5px auto 20px auto; }

.alt-img { padding: 5px; background: #fff; color: #333; display: inline-block; border-radius: 4px; margin-bottom: 20px; }

div[data-target] { margin: 0; padding: 0; position: relative; overflow: hidden; }

div[data-target] > div { text-align: center; position: relative; }

div#home { background: #066093; }

div#about { background: #0670ad; }

div#examples { background: #0880c4; }

div#contact { background: #0b9bee; }

5、书写并添加js代码。

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/jquery.easing.js"></script>

<script src="js/single-0.1.0.js"></script>

6、代码整体结构。

7、查看效果。