jquery用法

官方文档：github.com/alvarotrigo…

引入（js文件在最下方）

<script src="./js/fullpage.js"></script>

页面使用

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section"> //这是第三屏里面的子屏
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

<script src="./js/slide.js"></script>
<script>
 // 初始化滚动
new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    verticalCentered: false,
    scrollingSpeed: 700, //切换速度
    touchSensitivity: 13, //灵敏度
    // navigation: true, //导航栏
    // easingcss3: 'ease-in',
    onLeave(origin, destination) {
        let last = $(origin.item)
        let next = $(destination.item)
        console.log(last);
        console.log(next);
        last.removeClass('show')
        next.addClass('show')
    },
});
</script>

附：

//使用npm进行安装
npm install fullpage.js

//使用
new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

如果要横向滑动，只需要将section改为 slide 就可以啦~·