今天想用jQuery的fullpage插件做个小demo,却掉进了个大坑,折腾了半天才爬出来,哭唧唧。
现在开始我的掉坑之旅:
1、引用css文件
<link rel="stylesheet" href="css/fullpage.css">
2、引用相关js文件
<script src="js/fullpage.js"></script>
<script src="js/jquery.js"></script>
3、html结构
<div id="fullpage">
<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>
5、js初始化
$(function($){
$("#fullpage").fullpage();
});
好了,完全跟着官方文档走,但在控制台却报出下面的错误:
根据错误一直找问题所在,查代码,找度娘,后来发现我在引入js文件的时候出了错: fullpage 是基于jQuery的插件,当然要先引入jQuery文件啦,
<script src="js/jquery.js"></script>
<script src="js/fullpage.js"></script>
现在问题解决,完全OK
总结 :
js文件引用要注意引入顺序问题,应当先引入该js文件,再引入基于该文件的插件。