Question

jquery全屏滚动插件怎么用

Answer 1

1、引入文件
<link
rel="stylesheet"
href="css/jquery.fullPage.css">
<script
src="js/jquery.min.js"></script>
<!--
jquery.easings.min.js
用于
easing
参数，也可以使用完整的
jQuery
UI
代替，如果不需要设置
easing
参数，可去掉改文件
-->
<script
src="js/jquery.easings.min.js"></script>
<!--
如果
scrollOverflow
设置为
true，则需要引入
jquery.slimscroll.min.js，一般情况下不需要
-->
<script
src="js/jquery.slimscroll.min.js"></script>
<script
src="js/jquery.fullPage.js"></script>
2、HTML
<div
id="dowebok">
<div
class="section">
<h3>第一屏</h3>
</div>
<div
class="section">
<h3>第二屏</h3>
</div>
<div
class="section">
<h3>第三屏</h3>
</div>
<div
class="section">
<h3>第四屏</h3>
</div>
</div>
每个
section
代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的
section
加上
class=”active”，如：
<div
class="section
active">第三屏</div>
同时，可以在
section
内加入
slide，如：
<div
id="dowebok">
<div
class="section">第一屏</div>
<div
class="section">第二屏</div>
<div
class="section">
<div
class="slide">第三屏的第一屏</div>
<div
class="slide">第三屏的第二屏</div>
<div
class="slide">第三屏的第三屏</div>
<div
class="slide">第三屏的第四屏</div>
</div>
<div
class="section">第四屏</div>
</div>
3、JavaScript
$(function(){
$('#dowebok').fullpage();
});
更多相关内容可参考资料www.viiboo.cn