FullScroll 平滑的全屏页面滚动滑块JS插件

简介

一个普通的JavaScript库，用于创建具有平滑滚动和键盘导航功能的全屏垂直页面幻灯片滑块，非常适合创建一个完整的页面演示来展示你的作品。

（下载的附件中附有DEMO）

更多单页滚动插件：👉  [ 详情 ]

使用

1.  引入文件

<link rel="stylesheet" href="css/fullscroll.css">
<script src="js/fullscroll.js"></script>

2.  HTML

<div class="fullscroll">
  <h1>Page 1</h1>
  <span>This is page 1.</span>
</div>
<div class="fullscroll">
  <h1>Page 2</h1>
  <span>This is page 2.</span>
</div>
<div class="fullscroll">
  <h1>Page 3</h1>
  <span>This is page 3.</span>
</div>

3.  调用

创建一个新的FullScroll：

new FullScroll();

您可以通过在FullScroll调用函数中添加一个名为选择器的选项来更改FullScroll页面的选择器：

new FullScroll({ selector: '#container > .my-page-element-selector' });

每次更改页面时执行一个函数

new FullScroll({
  onChange: function(){
    /* Do stuff here */
  }
});

4.  API 方法

// Go to the page with the specfied index.
new FullScroll().goto( 0 );
// Go to the next page.
new FullScroll().next();
// Go to the previous page. 
new FullScroll().previous();
// Get the current page index. 
console.log( new FullScroll().current );

相关链接

GitHub 地址 ：  https://github.com/RapidtSoftware/FullScroll

易助科技效果演示地址 ：  http://demo.easyzone.net.cn/plugin/FullScroll/index.html