fullpage.js自动滚动怎么设置

JavaScript022

fullpage.js自动滚动怎么设置,第1张

目的:实现自动滚动

工具:fullpage.js

页面中需要引用的JS:

<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> 

<script src="jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>

参照 : jQuery全屏滚动插件fullPage.js

实现自动滚动思路:

所谓自动滚动也就是进入页面后,不使用鼠标等操作就可以自动翻页(滚动)

利用js给定一个时间范围,例如3秒调用一次滚动方法,就可以实现!!!

//获取一共有多少个需要滚动的锚点

var len=$("#Id div").length

//设定自然数,默认为0

var num=0

//此方法为,页面停留5秒后自动滚动进入下一屏

settimeOut(function(){

        $("#Id div").eq(num).fullpage()

        ai++

        //如果ai等于锚点数时,将ai重新赋值为0

        if(ai==len){num==0}

},5000)

目的: 设置背景图

工具: fullpage.js

引用:

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

<script src="jquery.fullPage.min.js"></script>

参考代码:

<html lang="zh-CN">    

<head>    

<meta charset="utf-8">    

<title>fullPage.js — 背景演示_dowebok</title>    

<link rel="stylesheet" href="css/jquery.fullPage.css">    

<style> 

/*设置不同的背景图片*/   

.section { text-align: center font: 50px "Microsoft Yahei" color: #00ff00}    

.section1 { background: url(images/bg1.jpg) 50%}    

.section2 { background: url(images/bg2.jpg) 50%}    

.section3 { background: url(images/bg3.jpg) 50%}    

.section4 { background: url(images/bg4.jpg) 50%}    

</style>    

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

<script src="jquery.fullPage.min.js"></script>    

<script>  

//执行滚动事件,加载不同的背景图片  

$(function(){    

$('#dowebok').fullpage()    

})    

</script>    

</head>    

<body>    

<div id="dowebok">    

<div class="section section1">欢迎来到我的空间</div>    

<div class="section section2">在这里我将展示不同以往的一面</div>    

<div class="section section3">展示我的知识</div>    

<div class="section section4">也展示我的青春</div>    

</div>    

</html>