建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:28收藏

简介


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

(下载的附件中附有DEMO)


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


使用 Vanilla JS 平滑全屏页面幻灯片滑块插件 FullScroll



使用


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