jquery-fullpage插件

jquery fullpage.js全屏滚动插件/jquery-easing插件

// 前端自动化工具安装插件

在页面引入：

 <link rel="stylesheet" href="bower_components/fullpage.js/dist/jquery.fullpage.min.css"/>
 <script src="bower_components/jquery/dist/jquery.min.js"></script>
 <!-- 可选择的，支持更多的动画过渡效果 -->
 <script src="bower_components/jquery-easing/jquery.easing.min.js"></script>
 <script src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>

/******************************/

 <div id="fullpage">
     <div class="section">
         <h1>这是第一屏</h1>
     </div>
     <div class="section">
         <h1>这是第二屏</h1>
     </div>
     <div class="section">
         <h1>这是第三屏</h1>
     </div>
     <div class="section">
         <h1>这是第四屏</h1>
     </div>
 </div>

/******************************/

 $(function () {
         $('#fullpage').fullpage();
 });

/******************************/

 <!-- 添加幻灯片 -->
     <div class="section" style="background: lightblue;">
         <div class="slide">slide1</div>
         <div class="slide">slide2</div>
         <div class="slide">slide3</div>
         <div class="slide">slide4</div>
     </div>

GitHub源码：https://github.com/liuqiuchen/fullpage

.section.active 设置显示的屏

图片懒加载：
jQuery图片延迟加载插件Lazy Load

更多查看fullpage api......

实用拓展：

Move.js插件：CSS3动画的JavaScript插件

官网：http://jquer.in/css3-jquery-plugins/move-js/

Example：http://visionmedia.github.io/move.js/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation