1、首先需要新建一个HTML文档,这里设立一下基本的架构。
2、再新建一个CSS文件,用link关联一下HTML文档。
3、创建DIV标签,并且往里面填充内容。
4、先设定一下滚动条内框的大小。
5、用border先来查看是否有超出,这里可以看出超出了很多内容。
6、overflow-y: scrolloverflow-x: scroll加上这个样式滚动条就会出现了。
7、现在就能对轨道和滚动条进行样式的设置了。
目的:实现自动滚动
工具: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)